依照惯例,开头先放出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);
(未完待续)