Redux
Redux是React中使用广泛的集中状态管理工具 类比vuex之于vue 同类的工具还有mobx等
Redux最主要是用作应用状态的管理。简言之,Redux用一个单独的常量状态树(state对象)保存这一整个应用的
状态,这个对象不能直接被改变。当一些数据变化了,一个新的对象就会被创建(使用actions和reducers),这
样就可以进行数据追踪,实现时光旅行
Redux
是一款状态管理库,并且提供了react-redux
库来与React
亲密配合
1. redux介绍及设计和使用的三大原则
-
state 以单一对象存储在store对象中
-
state只读(每次返回一个新的对象)
-
使用纯函数reducer执行state更新
-
state: 一个对象 存放着我们管理的数据
-
action: 一个对象 用来描述你想怎么改数据
-
reducer: 一个函数 根据action的描述更新state
2.Redux模型中的几个组成对象:
action 、reducer、store:
-
action:官方的解释是action是把数据从应用传到 store 的有效载荷,它是 store 数据的唯一来源;要通过本地或远程组件更改状态,需要分发一个action;
-
reducer:action发出了做某件事的请求,只是描述了要做某件事,并没有去改变state来更新界面,reducer就是根据action的type来处理不同的事件;
-
store:store就是把action和reducer联系到一起的对象,store本质上是一个状态树,保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。
Redux是针对JavaScript应用的可预测状态容器
3.Redux 三大核心
Redux的核心由三部分组成:Store, Action, Reducer。
-
Store : 是个对象,贯穿你整个应用的数据都应该存储在这里。
-
Action: 是个对象,必须包含type这个属性,reducer将根据这个属性值来对store进行相应的处理。除此之外的属性,就是进行这个操作需要的数据。
-
Reducer: 是个函数。接受两个参数:要修改的数据(state) 和 action对象。根据action.type来决定采用的操作,对state进行修改,最后返回新的state。
4.Store有三个方法:
-
getState:用来获取store里面存储的数据。
-
dispatch: store里的数据不能直接修改,只能通过触发action来进行修改,这个方法就是用来触发action。
-
subscibe:订阅store改变时,要进行的操作。比如在react中,当store改变时,我们需要调用render方法对视图进行更新。
5.redux使用
// 引入redux
import { applyMiddleware, combineReducers, createStore,compose } from 'redux'
import CityReducer from './reducers/CityReducer'
// 导入ReduxThunk或redux-promise中间件,可以解决异步接收数据问题
// 同步不需要中间件
import ReduxThunk from 'redux-thunk'
import ReduxTPromise from 'redux-promise'
// 通过combineReducers把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore
const reducer = combineReducers({ CityReducer})
// 使用ReduxThunk,导入applyMiddleware中间件使