Redux_3

一、准备

• 构建react项目：npx create-react-app redux-demo
• 删除多余文件
• 在pages目录下创建Home组件
• 编写一个结构样式：<button>发送要给action</button>
• 在App.js引入自定义的组件
• 安装redux: yarn add redux

二、构建Action

• 在根目录下创建一个文件夹 action
• 在该目录下创建一个 index.js 文件，用来构建 Action
• 在 index.js 中创建函数里面 利用return，返回一个action对象，注意需要携带 type 属性
• 把这个 action 创建函数进行导出

三、构建Reducer

• 在根目录下创建一个文件夹 reducer
• 在该目录下创建要给 index.js 文件，用来构建 reducer，注意reducer要接收两个参数
• 第一个参数state,我们可以定义一个初始化的state，然后进行赋值
• 在函数里面判断第二个参数 action的type值是否是我们发送的
• 如果是，可以通过 return 返回新的 state
• 把 reducer 进行导出

四、创建Store

• 在根目录下创建一个文件夹store
• 在该目录下创建一个index.js文件，用来构建store，注意createStore函数里面第一个参数接收的是reducer
• 我们需要导入刚刚创建的reducer,然后设置到函数里面去
• createStore的返回值就是我们构建好的store,然后进行导出

五、在Home组件开始使用

在页面加一个button，绑定一个点击事件

在组件一加载完毕的时候就通过store来进行监听器的注册，返回值可以用来注销监听

this.unSubbscribe = store.subscribe( () => {...} );

在点击事件处理函数中，通过store.dispatch 来发送一个action

handleClick = () => { store.dispatch(sendAction() ) };

总结

 

本文地址：https://blog.csdn.net/qq_36777191/article/details/107382359