redux - это контейнер с предсказуемым состоянием, который действует как ваша единственная точка правды, манипулируя вашими данными, можно с помощью действий, которые являются чистыми функциями.
поэтому, когда у вас есть состояние, которое разделяется между вашими компонентами, именно здесь вам нужно переместить это состояние в хранилище с избыточностью, каждый элемент в хранилище имеет редуктор, если ваше приложение - это только одно.
Например, первое, что вам нужно сделать, это установить необходимые зависимости:
npm install redux react-redux --save
после его установки создайте файл с именем store.js со следующим кодом:
import {combineReducers,createStore} from 'redux'
// Your Reducer
import myReducer from './myreducer'
// we use combineReducers to be able to add more than one.
const reducers = combineReducers({
mystate:myReducer
})
export default createStore(reducers);
тогда давайте создадим этот редуктор myreducer.js:
// this is your pure function has 2 params
// first one is the state it immutable
// then the action which is the action you dispatched with its paylod
const myReducer = (state = [], action) => {
switch (action.type) {
case "ADD_ITEM":
// i created a new array and spread the data in it to be immutable
return [...state,action.item]
// you always need this becuse redux will run all the reducers.
default:
return state;
}
}
export default myReducer;
Теперь вернитесь к компоненту App.js и сделайте его следующим образом:
/*
The <Provider /> makes the Redux store available to any nested components that have been wrapped in the connect() function.
Since any React component in a React Redux app can be connected, most applications will render a <Provider> at the top level, with the entire app’s component tree inside of it.
Normally, you can’t use a connected component unless it is nested inside of a <Provider>.
*/
import React, {Component} from 'react';
import {Provider} from 'react-redux'
import store from './store'
export default class App extends Component {
render(){
return (
<Provider store={store}>
// your app
</Provider>
)
}
}
Рекомендую перейти к быстрому старту (https://react -redux.js.org / введение / быстрый старт )