阅读文章 链接
1. 是啥?
- 总的来说,redux 使用 store 保存并管理页面中的各种状态(state)
- 当需要改变 state 时,使用 dispatch 调用 action creators 触发 action
- 接着使用纯函数(pure function)reducer 来处理这些 action,它会根据当前 state 和 action 返回新的 state
- view 层可以对于 state 进行订阅(subscribe),这样就可以得到新的 state,从而可以刷新界面
转自 链接
2. 三大原则
2.1 单一数据源
2.2 State 是只读的
惟一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
2.3 使用纯函数来执行修改
为了描述 action 如何改变 state tree ,你需要编写 reducer。
3. 基础
几个主要概念 action \ reducer \ store \ createStore
3.1 action
redux 唯一限制的一点是必须有一个 type 属性用来表示执行哪种操作,值最好用字符串,而不是 Symbols,因为字符串是可被序列化的。
标准
- 一个 action 必须是一个 JavaScript Object,并且有一个 type 属性。
- 一个 action 可以有 payload/error/meta 属性。
- 一个 action 不能有其他属性。
3.2 reducer
Reducer 的工作就是接收旧的 state 和 action,返回新的 state。
是一个纯函数
之所以称作 reducer 是因为它将被传递给 Array.prototype.reduce(reducer, ?initialValue) 方法。
保持 reducer 纯净非常重要。
永远不要在 reducer 里做这些操作:
- 修改传入参数;
- 执行有副作用的操作,如 API 请求和路由跳转;
- 调用非纯函数,如 Date.now() 或 Math.random()。
3.3 store
store 就是用来维持应用所有的 state 树的一个对象。
只需要把根部的 reducer 函数传递给 createStore 就可以得到一个 store。
import { createStore } from 'redux';
function reducer(state, action) {
switch (action.type) {
case 'SOME_ACTION':
// 一些操作
return newState; // 返回新状态
default:
return state;
}
}
const store = createStore(reducer);
redux 中提供了这几个 api 操作 store
3.3.1 getState
获取当前整个 state 树
3.3.2 dispatch (action)
分发 action 给对应的 reducer
该函数会调用 getState() 和传入的 action 以【同步】的方式调用 store 的 reduce 函数
然后返回新的 state
从而 state 得到了更新,并且变化监听器(change listener)会被触发。
异步操作,会放到 action creator 这个步骤
3.3.3 subscribe (listener)
为 store 添加一个变化监听器,每当 dispatch 的时候就会执行,你可以在 listener(回调函数)中使用 getState() 来得到当前的 state。
它会返回一个函数,而你执行这个函数后就可以取消订阅。
3.3.4 replaceReducer (nextReducer)
替换 store 当前用来计算 state 的 reducer。比较高级
4. 与React结合
最佳实践一般是由容器组件负责一些数据的获取,进行 dispatch 等操作。而展示组件组件不应该关心逻辑,所有数据都通过 props 传入。
这样才能达到展示组件可以在多处复用,在具体复用时就是通过容器组件将其包装,为其提供所需的各种数据。