Вопрос: Можно ли использовать createStore() из редукса в компоненте? Если да, то как это сделать правильно?
Я пытаюсь понять реакцию и редукцию, преобразуя этот пример секундомера в подход, основанный на компонентах.
Оригинальный подход заключается в следующем:
let container = Redux.createStore((model = { running: false, time: 0 }, action) => {
const updates = {
'START': (model) => Object.assign(model, {running: true}),
'STOP': (model) => Object.assign(model, {running: false}),
'TICK': (model) => Object.assign(model, {time: model.time + (model.running ? 1 : 0)})
};
return (updates[action.type] || (() => model))(model);
});
А также
const render = () => {
ReactDOM.render(view(container.getState()),
document.getElementById('root')
);
};
Что я получаю до сих пор, так это это, который не показывает счетчик div.
Обратите внимание, что я пытаюсь понять причины, лежащие в основе реакции и редукса, таким образом избегая намеренного использования react-redux
.
Технически это возможно, но так делать не следует.
В React вы хотите, чтобы вывод метода render
зависел только от свойств и состояния компонента. Итак, что вы хотите сделать, так это определить компонент, который ожидает, что что-то вне него предоставит реквизиты, а затем сделать Redux этим провайдером.
Подробнее об этом можно прочитать здесь.
В вашем примере была еще одна проблема: Redux хочет, чтобы редуктор (метод, который вы передаете createStore
), нет мутировал предыдущее состояние. Object.assign(state, ...)
мутирует объект, поэтому его нужно заменить на Object.assign({}, state, ...)
. Подробнее об этом здесь.
У меня есть рабочий фрагмент для вас, но я настоятельно рекомендую следовать официальным руководствам :)
Мой проект использует
create-react-app
для создания скелета в первую очередь.