一、准备
- 构建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
