redux 使用

什么是Redux

Redux 是数据管理工具，Redux 能让Javascript的状态管理变得更加可预期

项目中Redux使用的技术，主要：

image.png

项目使用 create-react-app 创建开发环境

环境中包含一套 webpack 最佳配置，提供了 react 的 jsx 语法和 es6 语法的编译能力。

程序的入口 src/index.js 文件。导入 React ，ReactDOM 负责把组件渲染到浏览器中, ReactDOM.render , 把 App 组件挂载到 id 为 root 的页面元素上，这个元素在 public/index.html 中。

命令行中执行

yarn start

Redux 的使用

一切数据都要保存的 Store 之中，组件自己不保留 state 数据

• redux 并不是 react 的一部分

npm i --save redux

首先创建 src/store/index.js 文件。首先导入 createStore 接口，顾名思义，这个就是用来创建 store 的。然后导入 reducer ，reducer 是一个用来修改 store 的函数，也是 redux 的核心组成部分之一。定义 store 常量来存放 store ，createStore 接口中传入 rootReducer 。最后把 store 默认导出。

• store 有了后，数据要放到Reducer中

创建 reducers/index.js 文件。。。。。

• 用 redux-logger 监控 action

为了辅助开发，先安装 redux-logger 。
npm i redux-logger
log 的意思是记录。

image.png

• 如何修改状态？ 使用action

通过store中dispatch 的 action ，就不仅仅有 type 了，还有携带的数据

image.png

• action 发出之后，谁会接收它？ 使用Reducer，state改变后

image.png

• 读取store中改变的数据

一种 是store.getState() 的形式来读取数据

另外一种 是 image.png