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

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

25.11.2020, 21:37. Показов 1592. Ответов 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
Ответ Создать тему
Новые блоги и статьи
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru