Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 Аватар для Kraken73
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 612

собственный redux, как написать useSelector?

25.11.2020, 21:37. Показов 1577. Ответов 0
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем привет, столкнулся с интересным заданием и решил проверить себя. Нужно написать собственную реализацию редакса. Сейчас проблема в том, что не понимаю как подписаться на обновление стора
ссылка на песочницу
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
const createStore = (reducer, initialState) => {
  let currentState = initialState
  let currentReducer = reducer
  var listeners = []
 
  const getState = () => currentState
 
  const dispatch = action => {
    currentState = reducer(currentState, action)
    listeners.forEach(listener => listener())
    return action
  }
 
  const subscribe = listener => listeners.push(listener)
  
 
  return { getState, dispatch, subscribe }
}
 
const Context = React.createContext(null);
 
const useSelector = selector => {
  const ctx = React.useContext(Context)
  
  if (!ctx) {
    return 0
  }
  return selector(ctx.store.getState()) 
}
const useDispatch = (action) => {
  const ctx = React.useContext(Context)
 
  if (!ctx) {
    return () => {}
  }
 
  return ctx.store.dispatch
}
 
const Provider = ({ store, children }) => {
  return <Context.Provider value={{ store }}>{children}</Context.Provider>
}
 
// APP
 
// actions
const UPDATE_COUNTER = 'UPDATE_COUNTER'
const CHANGE_STEP_SIZE = 'CHANGE_STEP_SIZE'
 
// action creators
const updateCounter = value => ({
  type: UPDATE_COUNTER,
  payload: value,
})
 
const changeStepSize = value => ({
  type: CHANGE_STEP_SIZE,
  payload: value,
})
 
 
// reducers
const defaultState = {
  counter: 1,
  stepSize: 1,
}
 
const reducer = (state = defaultState, action) => {
  switch(action.type) {
    case UPDATE_COUNTER:
      return { ...state, counter: state.counter += action.payload }
    case CHANGE_STEP_SIZE:
        return { ...state, stepSize: action.payload }
    default:
      return state
  }
}
 
const Counter = () => {
  const counter = useSelector(state => state.counter)
  const dispatch = useDispatch()
 
  return (
    <div>
      <button onClick={() => dispatch(updateCounter(-1))}>-</button>
      <span> {counter} </span>
      <button onClick={() => dispatch(updateCounter(1))}>+</button>
    </div>
  )
}
 
const Step = () => {
  const stepSize = useSelector(state => state.stepSize, (current, prev) => current === prev)
  const dispatch = useDispatch()
 
  return (
    <div>
      <div>Значение счётчика должно увеличиваться или уменьшаться на заданную величину шага</div>
      <div>Текущая величина шага: {stepSize}</div>
      <input
        type="range"
        min="1"
        max="5"
        value={stepSize}
        onChange={({ target }) => dispatch(changeStepSize(target.value))}
      />
    </div>
  )
}
 
const store = createStore(reducer, defaultState);
 
ReactDOM.render(
  <Provider store={store}>
      <Step />
      <Counter />
  </Provider>,
  document.getElementById('app')
)
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
25.11.2020, 21:37
Ответы с готовыми решениями:

Redux+React. Взаимодействие redux store с сервером
Помогите понять такой момент: Приложение react+redux+ сервер на ноде. Пока не использовал сервер работа redux store была более-менее...

Как написать собственный компилятор?
Пишу среду программирования. Нужен компилятор (код для создания exe-файла).

Как написать собственный контроллер
Всем хай, кто-нибудь когда-нибудь писал контроллеры? Есть модет примеры? Какой там вообще алгоритм будет? С чего начать?

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
25.11.2020, 21:37
Помогаю со студенческими работами здесь

Как написать пользовательский (собственный) модуль
Здравствуйте! Уже как неделю пытаюсь решить проблему с написанием собственного модуля. Во время компиляции я не нахожу свой модуль в...

Как написать собственный элемент управления?
Всем привет! Хочу написать собственный элемент управления. Начал искать информацию, но, как и предполагал, ничего путного не нашёл. ...

Как написать собственный HTTP-сниффер
Здравствуйте, как создать программу для получения get запроса с определённого сервера(в моем\данном случае с сервера...

как написать собственный саит с нуля?
всем доброго вечера(утра, дня.) столкнулся с такой проблемой: как написать собственный саит с нуля? куда привязки лучще всего делать?...

Как написать собственный файл (собственного типа и структуры)
Здравствуйте. Пишу на Си прогу которая создает файл собственной структуры и своего типа (ну пусть это будет .somefile). Так вот, есть...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru