redux

redux就是一个容器,用来做数据状态的统一管理
react中应用的场景有:
1.两个组件组件之间的相互通信;
2.react中数据都是向下分发,如果要向上通信的话就只能使用回调函数所以采用redux来做数据的统一管理
3.某一个状态在所有组件中都需要用到,例如token,采用redux来管理是很好的方法

redux应用图解

redux 并不是隶属于react 它只是一个公用的状态管理插件,也可以在其他框架里面引用,引用方式:

  //在react中的引用 , redux-thunk是一个中间件
  npm i redux  react-redux  redux-thunk

如果想要在项目里面的所以组件里面都使用状态管理的数据,需要在根组件App.js里面使用一个容器将根组件包裹起来即使用react-redux提供的Provider组件将根容器包裹起来,这样子使用以后所有子组件都可以拿到state

Provider组件

生成store,采用createStore和store里面的三个参数如图

生成store
抽离store为单独的文件
applyMiddleware中间件是redux的原生方法,用来将所有的redurce组成一个组件,依次执行

redux-thunk的作用就是解决异步操作的action的问题,因为异步操作至少会有两个action动作,这样子在dispatch接受参数时需要用到这个中间件

image.png 将redurce抽离到rootReducer中

rootReducer其实就是一个数组,在抽离出来的reducer中会使用到combineReducers这个方法来将所有的小的reducer合并成为一个大的reducer数组

combineReducers方法的使用

reducer的作用就是返回新的状态state

单独reducer文件

将reducer和组件关联起来,必须要建立action来触发store修改状态,在react-redux里面的Provider是将组件包裹起来使得每一个组件都可以使用state,另外一个方法connect就是用来连接组件和action就是说当你定义好action以后,如果想要在组件中使用action里面的方法就需要在组件中使用connect方法来连接这两个部分

import {connnect} from 'react-redux'
//...
export defualt connect(null , action)(actionFun)

仅仅只是连接组件和action还不够还需要对action进行分发,分发的时候就需要对action定义一个type

dispatch派发action一定要有type

在reducer里面使用

在reducer里面使用

如果想要在组件中获取reducer给我们返回的状态,我们需要用到mapStateToProps这个方法

mapStateToProps

有点乱,然后照着视频写了一下,大体梳理了一下:
先建立组件,然后关联上action,然后dispatch到reducer里面,reducer返回新的state状态,更新组件状态