Redux是一个用于JavaScript应用程序的可预测状态容器，它可以帮助我们管理React应用的状态和事件分发。Redux的核心概念是store、action和reducer。
在使用Redux之前，我们需要先安装redux和react-redux这两个npm包。
npm install redux react-redux --save
在Redux中，store是用于存储应用程序状态的地方。我们可以通过创建一个store来管理应用程序的状态。
javascript
import { createStore } from 'redux';
import rootReducer from './reducers'; // rootReducer是一个reducer组成的对象
const store = createStore(rootReducer);
action是一个纯JavaScript对象，用于描述发生了什么。它包含一个type属性和一些其他数据。
javascript
const ADD_TODO = "ADD_TODO";
const addTodo = (text) => {
return {
type: ADD_TODO,
text
}
}
reducer是一个纯函数，它接收先前的状态和一个action，并返回新的状态。reducer根据action的类型来确定如何更新状态。
javascript
const initialState = [];
const todoReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
return [...state, { text: action.text }];
default:
return state;
}
}
我们需要使用react-redux的Provider组件将store注入到React应用程序中。然后，我们可以使用connect函数将组件连接到store。
javascript
import { Provider, connect } from 'react-redux';
const App = ({ todos }) => {
return (
{todos.map((todo, index) => {todo.text})}
)
}
const mapStateToProps = (state) => {
return {
todos: state.todos
}
}
const ConnectedApp = connect(mapStateToProps)(App);
const Root = () => {
return (
)
}
在上面的示例中，我们使用了connect函数将App组件连接到store。mapStateToProps函数将store中的状态映射到组件的props中。