1) установить redux, react-redux в проект
2) добавить HOC connect и подключить mapStateToProps и mapDispatchToProps:
import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";
// здесь описание вышеприведенных компонентов ...
// для трансформации текущего redux-store в props компонента
const mapStateToProps = state => {
return {
items: state.items
}
}
// для трансформации текущих redux-dispatch в props компонента
const mapDispatchToProps = dispatch => {
return {
addItem: {title, content} => {
dispatch(addItem({title, content}));
},
// ...
}
}
const TabsWithRedux = connect(mapStateToProps, mapDispatchToProps)(Tabs);
// -----------
// redux-store
// -----------
// начальный state
const initialState = {
items: [
{ title: "London", content: "London is the capital city of England." },
{ title: "Paris", content: "Paris is the capital of France." },
{ title: "Tokyo", content: "Tokyo is the capital of Japan." }
]
};
// создадим, к примеру, функционал добавления нового item
const ADD_ITEM = "ADD_ITEM";
// экшн
const addItem = item => {
return {
type: ADD_ITEM,
payload: item
};
};
// рутовый редьюсер
const rootReducer = (state = initialState, {type, payload} => {
switch (type) {
case ADD_ITEM:
return {
items: [...state.items, payload]
}
default:
return state
}
});
// основной стор
const store = createStore(rootReducer);
// рендер
ReactDOM.render(
<Provider store={store}>
<TabsWithRedux items={items} />
</Provider>,
document.getElementById("root")
);
