redux 简介
Redux 试图让 state 的变化变得可预测. 这些限制条件反映在 Redux 的 三大原则中.
Redux 可以用这三个基本原则来描述:
1) 单一数据源
2) State 是只读的
3) 使用纯函数来执行修改
单一数据源: 整个应用的 state 被储存在一棵 object tree 中, 并且这个 object tree 只存在于唯一一个 store 中.
State 是只读的: 惟一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象.
使用纯函数来执行修改: 为了描述 action 如何改变 state tree , 你需要编写 reducers.
基础
action reducer store 数据流
Action
格式:
javascript 代码
- { type: ADD_TODO,// 字符串常量, 表示将要执行的动作 (必须的)
- text: 'Build my first Redux app'// 可以更改 (非必须 )
- }
Action 创建函数
在 Redux 中的 action 创建函数只是简单的返回一个 action:
javascript 代码
- function addTodo(text) {
- return {
- type: ADD_TODO,
- text
- }
- }
Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程
javascript 代码
dispatch(addTodo(text))//text 形式不定, 一般我们传递一个 object,
或者创建一个 被绑定的 action 创建函数 来自动 dispatch:
javascript 代码
const boundAddTodo = (text) => dispatch(addTodo(text))
store 里能直接通过 store.dispatch() 调用 dispatch() 方法, 但是多数情况下你会使用 react-redux 提供的 connect() 帮助器来调用 (connect 作用, 将多个 reducer 函数合并成一个 reducers 函数来改变 store, 传递给 view)
javascript 代码
- const mapStateToProps = (state) => {
- const { schcode, stucode, username, photo, identity } = state.userInfo;
- const { flag, more, data } = state.homeindex;
- const { permissionobj } = state.permissionObj;
- return {
- schcode, stucode, username, photo, identity,
- flag, more, data, permissionobj
- };
- };
- export default connect((mapStateToProps), {
- push,
- userInfo,
- getUserInfo,
- mailList,
- getmailList,
- permissionObj, getPermission
- })(HomeView);
- Reducer
reducer 就是一个纯函数, 接收旧的 state 和 action, 返回新的 state.
只要传入参数相同, 返回计算得到的下一个 state 就一定相同. 没有特殊情况, 没有副作用, 没有 API 请求, 没有变量修改, 单纯执行计算.
javascript 代码
- function todoApp(state = initialState, action) {
- switch (action.type) {
- case SET_VISIBILITY_FILTER:
- return Object.assign({}, state, {
- visibilityFilter: action.filter
- })
- default:
- return state
- }
- }
- //initialState 初始值
- // 注意 assign 第一个参数为空的 {}, 如果卡布韦空, 那么他会改变第一个参数的值
combineReducers() 接收一个对象 (里面是所有的 reducer 函数), 可以把所有顶级的 reducer 放到一个独立的文件中, 通过 export 暴露出每个 reducer 函数, 然后使用 import * as reducers 得到一个以它们名字作为 key 的 object:
javascript 代码
- import { combineReducers } from 'redux'
- import * as reducers from './reducers'
- const todoApp = combineReducers(reducers)
- Store
action 来描述 "发生了什么", reducers 来根据 action 更新 state
Store 就是把它们联系到一起的对象. Store 有以下职责:
维持应用的 state;
提供 getState() 方法获取 state;
提供 dispatch(action) 方法更新 state;
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener) 返回的函数注销监听器.
已有的 reducer 来创建 store ,createStore()
javascript 代码
- let store = createStore(todoApp, window.STATE_FROM_SERVER)
- //todoApp-- 是通过 combineReducers() 将多个 reducer 合成一个的 reducers,
- // 第二个参数是可选的, 用于设置 state 初始状态
数据流
严格的单向数据流是 Redux 架构的设计核心.
Redux 应用中数据的生命周期遵循下面 4 个步骤:
1) 调用 store.dispatch(action).
2)Redux store 调用传入的 reducer 函数.
3) 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树. combineReducers()
4)Redux store 保存了根 reducer 返回的完整 state 树.
来源: http://www.qdfuns.com/article/25626/e36c39e5a718a65f0936ebd8868e4d42.html