如何在 React 应用中集成 Redux
介绍
本指南介绍了在 React 中使用 Redux 的最佳方法，并提供了如何在现有工作中添加 Redux 的示例。
创建一个基于 React.js 的新项目并向其中添加 Redux
首先创建一个新的 React 应用程序。
create-react-app react-redux-tutorial
cd react-redux-tutorial
npm start
首先添加所需的 Redux 包，如下所示：
npm install --save redux react-redux
Redux 是一个状态管理库，它为整个应用程序生成全局状态，以便所有组件都可以访问它。重要的是，整个应用程序只有一个全局状态，而不是每个组件都有单独的状态。
您将需要两个操作：startAction.js和stopAction.js。下一步是编辑src/actions/startAction.js：
export const startAction = {
type: "rotate",
payload: true
};
这里你基本上是在告诉你的 Reducer 你的操作类型是rotate ，就像 React 徽标的旋转一样。因此，当你希望徽标开始旋转时，旋转的状态将设置为true 。
接下来，编辑src/actions/stopAction.js：
export const stopAction = {
type: "rotate",
payload: false
};
当您希望徽标停止旋转时，旋转状态将设置为false 。
创建reducer rotateReducer.js并将下面的代码放入其中。
export default (state, action) => {
switch (action.type) {
case "rotate":
return {
rotating: action.payload
};
default:
return state;
}
};
现在，reducer 已准备好接收这两个操作，并将根据操作的有效负载修改应用程序内的相同状态。
如果操作类型不是rotate ，则默认情况将保持当前状态。在创建新操作但忘记为其分配案例的情况下，默认情况尤为重要。
最后一步是为应用创建商店。由于每个应用只有一个商店和一个状态，因此您无需为商店创建单独的新文件夹。但是，您可以通过为商店创建新文件夹并将其保存在那里来组织文件：
import { createStore } from "redux";
import rotateReducer from "reducers/rotateReducer";
function configureStore(state = { rotating: true }) {
return createStore(rotateReducer,state);
}
export default configureStore;
准备好存储、操作和减速器后，下一步是在src/App.css文件中添加一个新类来停止动画徽标的旋转。
在src/App.css中插入以下代码：
.App-logo-paused {
animation-play-state: paused;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
}
.App-logo-paused {
animation-play-state: paused;
}
.App-header {
background-color: #282c34;
display: flex;
flex-direction: column;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
接下来，编辑src/App.js文件，让它监听商店的状态。单击徽标后，它将调用启动或停止操作。
首先将所有组件连接到 redux 存储，以便您可以从react-redux导入connect。之后，使用 connect 方法导出您的应用组件。要编辑 redux 存储的状态，请导入您之前设置的操作：
import { startAction } from "actions/startAction";
import { stopAction } from "actions/stopAction";
接下来，从您的商店中检索状态，并使用连接功能通知应用程序您需要启动和停止操作来修改状态。
接下来，附加您的检索：
const mapStateToProps = state => ({
...state
});
const mapDispatchToProps = dispatch => ({
startAction: () => dispatch(startAction),
stopAction: () => dispatch(stopAction)
});
将它们插入到连接函数中：
export default connect(mapStateToProps, mapDispatchToProps)(App);
现在，您可以通过应用程序组件内的 props访问每个商店状态、startAction和stopAction 。
修改img标签：
<img
src={logo}
className={
"App-logo" +
(this.props.rotating ? "":" App-logo-paused")
}
alt="logo"
onClick={
this.props.rotating ?
this.props.stopAction : this.props.startAction
}
/>
接下来，通过提供程序利用商店呈现您的应用程序，而不是直接呈现应用程序组件。
ReactDOM.render(
<Provider store={configureStore()}>
<App />
</Provider>,
document.getElementById('root')
);
使用 Action Creator
另一种选择是使用动作创建器而不是动作。动作创建器只是创建动作的函数。
创建一个新的rotateAction.js文件并插入以下代码：
const rotateAction = (payload) => {
return {
type: "rotate",
payload
}
}
export default rotateAction;
现在，必须修改onClick函数：
onClick={() => this.props.rotateAction(!this.props.rotating)}
最后一步是将新的动作创建器附加到mapDispatchToProps：
rotateAction: (payload) => dispatch(rotateAction(payload))
现在，您的新src/App.js将如下所示：
// import statements
class App extends Component {
render() {
console.log(this.props);
return (
<div className="App">
<header className="App-header">
<img
src={logo}
className={
"App-logo" +
(this.props.rotating ? "":" App-logo-paused")
}
alt="logo"
onClick={
() => this.props.rotateAction(!this.props.rotating)
}
/>
</header>
</div>
);
}
}
const mapStateToProps = state => ({
...state
});
const mapDispatchToProps = dispatch => ({
rotateAction: (payload) => dispatch(rotateAction(payload))
});
export default connect(mapStateToProps, mapDispatchToProps)(App);
现实生活中的例子
假设页面上有一个菜单，用于更改左侧菜单的颜色。您可以通过使用组件状态并将所述状态从父组件传递到菜单以及负责修改状态的函数来实现这一点。
这是一个简单的例子，说明使用 Redux 代替组件状态。
创建动作setBgAction.js和setColorAction.js：
- 对于src/actions/setBgAction.js：
const setBgAction = (payload) => {
return {
type: "bgChange",
payload
}
}
export default setBgAction;
- 对于src/actions/setColorAction.js：
const setColorAction = (payload) => {
<span class="hljs-keyword免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~