Action

Action是store数据的唯一来源。需使用store.dispatch()将所需的action传到store。Action是把服务器响应的数据或者用户输入的数据、和其他一些非View的数据传入store的有效载荷。Action实际上是JS的普通对象。示例：

｛
   type:"ADD_TODO", //type为必须的字段，值为字符串或存放字符串的变量
   text:"我是示例"      
｝

需要注意的是：应该尽可能的减少在action中传递的数据。

Action创建函数

Action创建函数只是简单的返回一个action。示例：

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

Redux提供的bindActionCreators()可以自动把多个action创建函数绑定到dispatch()方法上。

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。

(previousState, action) => newState

永远不要在reducer里做这些操作：

修改传入参数；
执行有副作用的操作，如API请求和路由跳转；
调用非纯函数，如Data.now()或Math.random()；

reducer一定要保持纯净。只要传入参数相同，返回计算得到的下一个state就一定相同。没有特殊情况、没有副作用、没有API请求、没有变量修改，单纯执行计算

combinerReducers（）方法只是生成一个函数，这个函数用来调用你的一系列reducer，每个reducer根据他们的key来筛选出state中的一部分数据并处理，然后这个生成的函数再将所有reducer的结果合成一个大的对象。

//ES6的写法
import { combineReducers } from 'redux'
import * as reducers from './reducers'

const todoApp = combineReducers(reducers)

Store

Store的职责：

维持应用的state；
提供 getState() 方法来获取state；
提供 dispatch(action) 方法更新state；
通过 subscribe(listener) 注册监听器；
通过 subscribe(listener) 返回的函数注销监听器；

Redux 应用只有一个单一的 store

store的使用示例：

//创建store
let store = createStore(todoApp);
//打印初始状态
console.log("初始状态======》",store.getState());

//每次state更新时，打印日志
//注意subscribe()返回一个函数用来注销监听器
const unsubscribe = store.subscribe(()=>console.log("state有更新=======》",store.getState()))

//发起一系列action
store.dispatch(addTodo("learn about actions"));
store.dispatch(addTodo("learn about reducers"));
store.dispatch(addTodo("learn about store"));
store.dispatch(toggleTdo(0));
store.dispatch(toggleTdo(1));
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED));

//停止监听
unsubscribe();

数据流

Redux应用中数据的生命周期遵循4个步骤：

调用 store.dispatch(action) 。 action 就是一个描述“发生了什么”的普遍对象，可将其理解为通过 store.dispatch 来告诉reducer发生了什么
Redux store调用传入的reducer函数。根据传入的action.type来更新state
根reducer应该把多个子reducer输出合并成一个单一的state树。可使用原生的 combineReducers() 辅助函数，也可自己实现
Redux store保存了根reducer返回的完整的state树

Redux学习笔记-----基础部分

Action

Action创建函数

Reducer

Store

数据流

猜你喜欢