依照惯例,开头先放出redux中文文档地址
使用react当然要配套学习redux,本文就对redux学习进行一个总结。
redux的作用:简言之就是一整套框架帮助管理状态(state),至于状态管理的最佳实践这应该是另一个很大的话题了,这里就不多讨论了,对于初次使用redux的用户而言最简单的建议就是“先接受框架提供的方式,当你觉得完全理解了这些后再考虑按自己的思路优化、改进”。
redux三大基础概念
这里我们改变一下文档的介绍顺序(文档可能是按首字母排序的),我按照我认为比较容易理解的思路叙述一遍。
Store
首先,使用redux管理状态(state),那么state到底放在哪儿维护呢?所有的state(state树)都放在store中,而且是一个单一的store。
创建store可以通过redux提供的API createStore
createStore(reducer, [preloadedState], enhancer)
reducer(Function):接收两个参数,分别是当前state树和要处理的action
[preloadedState] (any):可选参数,给定初始state
enhancer(Function):返回的还是store creator
例子:
import {createStore} from 'redux'; import todos from './reducers'; let store = createStore(todos, ['use Redux']);
store提供几个API,让我们操作state
getState():获取state
dispatch(action):更新state
subscribe(listener):注册监听器
subscribe(listener):返回的函数注销监听器
PS:请特别注意这个函数接收的第一个参数是reducer,意味着创建一个store我们必须提供的是reducer
Reducer
reducer是一个纯函数,接收旧的 state 和 action,返回新的 state。
(previousState, action) => newState
简单地阐述一下,reducer函数的奥义就是传入一个state然后根据action来返回新的state。
有一个要点,返回的state不是通过修改原state得到的,需要返回的state应该是在副本上修改的结果。
另外,reducer可以拆分,最推荐的做法就是创建小的reducer,然后通过combineReducers()把小reducer合并。
Action
action 本质上是 JavaScript 普通对象。
action中会有一个type属性,作用就是触发特定的action。
例子:
最简单的action可以只定义一个字符串const action = 'start';常见一点的会是一个对象
{ type: TOGGLE_TODO, index: 5 }还有
action创建函数,返回一个action对象function addTodo(text) { return { type: ADD text } }
action创建完成后可以绑定给一个函数,后续就可以直接调用这个函数
const boundDispatchAddTodo = (text) => {dispatch(addTodo(text))};
···
boundDispatchAddTodo(text);
(未完待续)