redux是一个专门用于状态管理的js库
作用:集中式管理react应用中多个组件共享的状态。
不同身份的用户有不同的使用方式(比如普通用户和管理员)
View要从多个来源获取数据
某个组件的状态,需要共享且需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态
Store 就是保存数据的地方
Redux 提供createStore这个函数,用来生成 Store。
当前时刻的 State,可以通过store.getState()拿到
store.dispatch()是 View 发出 Action 的唯一方法。
你在你的组件中要做什么,你要把你这个操作告诉action Creators
用于创建action,是一个动作对象,type 类型,data:干啥 —2
dispatch 分发action 这个动作对象,分发给store 类似一个调度者,不去做操作
store把当前的state和action给reducers
Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State的纯函数,返回给store
用于初始化状态、加工状态
组件使用getState获取最近的状态
action
异步action 是在redux里做异步操作,非在组件里面做异步操作
同步action : object 类型的一般对象
异步action:函数 :因为函数里面才能做异步任务,但是store只能接受一个对象,所有要使用一个中间件
redux-thunk中间件,改造store.dispatch,使得后者可以接受函数作为参数。
让store先调用一下这个函数
4.求和案例_react-redux基本使用
(1).明确两个概念:
1).UI组件:不能使用任何redux的api,只负责页面的呈现、交互等。
2).容器组件:负责和redux通信,将结果交给UI组件。
(2).如何创建一个容器组件————靠react-redux 的 connect函数
connect(mapStateToProps,mapDispatchToProps)(UI组件)
-mapStateToProps:映射状态,返回值是一个对象
-mapDispatchToProps:映射操作状态的方法,返回值是一个对象
(3).备注1:容器组件中的store是靠props传进去的,而不是在容器组件中直接引入
(4).备注2:mapDispatchToProps,也可以是一个对象
5.求和案例_react-redux优化
(1).容器组件和UI组件整合一个文件
(2).无需自己给容器组件传递store,给<App/>包裹一个<Provider store={store}>即可。
(3).使用了react-redux后也不用再自己检测redux中状态的改变了,容器组件可以自动完成这个工作。
(4).mapDispatchToProps也可以简单的写成一个对象
(5).一个组件要和redux“打交道”要经过哪几步?
(1).定义好UI组件---不暴露
(2).引入connect生成一个容器组件,并暴露,写法如下:
connect(
state => ({key:value}), //映射状态
{key:xxxxxAction} //映射操作状态的方法
)(UI组件)
(4).在UI组件中通过this.props.xxxxxxx读取和操作状态