返回
React 中使用 Redux：新手手把手教程
前端
2023-11-15 07:03:06
初涉 React，当我被委以使用 React 来维护和开发项目的重任时，对一直使用 Vue 的我来讲，着实需要一番钻研。在开发过程中，我接触到了 Redux，原本以为它跟 Vuex 的用法类似，但事实证明并非如此。
Redux 的本质
Redux 是一种状态管理库，它以单向数据流的方式管理应用程序的状态。这与 Vuex 中的双向绑定不同，在 Redux 中，状态只能通过动作（actions）进行修改，而动作则是由应用程序派发的事件。
构建 Redux 应用程序
1. 安装 Redux
使用 npm 或 yarn 安装 Redux：
npm install redux
2. 创建 Redux 存储
创建一个 Redux 存储来存储应用程序的状态：
import { createStore } from 'redux';
const store = createStore(reducer);
3. 定义 Redux 减速器
减速器是一个纯函数，它根据传入的 action 和当前状态返回新的状态：
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, counter: state.counter + 1 };
case 'DECREMENT':
return { ...state, counter: state.counter - 1 };
default:
return state;
}
};
4. 将 Redux 与 React 连接
使用 react-redux 库将 Redux 与 React 连接起来：
import React from 'react';
import { connect } from 'react-redux';
const Counter = ({ counter, increment, decrement }) => (
<div>
<h1>{counter}</h1>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
const mapStateToProps = (state) => ({
counter: state.counter,
});
const mapDispatchToProps = (dispatch) => ({
increment: () => dispatch({ type: 'INCREMENT' }),
decrement: () => dispatch({ type: 'DECREMENT' }),
});
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
5. 使用 Redux
现在，您可以使用 Redux 来管理应用程序的状态：
import store from './store';
// 获取状态
const counter = store.getState().counter;
// 派发动作
store.dispatch({ type: 'INCREMENT' });
结论
Redux 是一种管理 React 应用程序状态的强大工具。通过使用 Redux，您可以轻松地处理复杂的状态，并使您的应用程序更加可预测和可测试。
附加提示
- 使用
Redux DevTools扩展来调试 Redux 应用程序。 - 阅读 Redux 文档以了解更多信息。
- 查看 Redux 教程和示例以获取动手实践。
