redux

Reducer

创建一个reducers管理各个reducer

在reducer中修改state 通过（return newstate）可以更新state

store = createStore(reducer)
store.dispatch()

将action传到store，发修改状态的请求，触发action

redux是通过纯函数代替事件处理器

store.dispatch({
	type: 'COMPLETE_TODO',
	index: 1
})

添加新todo任务的action

const ADD_TODO = 'ADD_TODO'`

{
	type: ADD_TODO,
	text: 'Build my first Redux app'
}

使用type字段表示将要执行的动作。

Action创建函数

Action创建函数是生成action的方法。

在Redux中的action创建函数只是简单的返回一个action。

function add Todo(text) {
	return {
		type: ADD_TODO,
		text
	}
}

store

action 描述“发生了什么”，reducers来根据action更新state的用法。

store就是把它们联系到一起的对象。store有一下职责：

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

Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。

数据流

严格的单向数据流是 Redux 架构的设计核心。

应用中所有的数据都遵循相同的生命周期，这昂可以让应用变得更加可预测且容易理解。

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

1. 调用 store.dispatch(action).
   action 是一个描述 “发生了什么” 的普通对象。比如：

{ type: 'LIKE_ARTICLE', articleId: 42 }
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }

可以在任何地方调用 store.dispatch(action)， 包括组件中、XHR 回调中、甚至定时器中。

2. Redux store 调用传入的 reducer 函数。
   Store
3. 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
   根 reducer 的结构完全由你决定。Redux 原生提供combineReducers()辅助函数，来把根 reducer 拆分成多个函数，用于分别处理 state 树的一个分支。

下面演示 combineReducers() 如何使用。假如你有两个 reducer：一个是 todo 列表，另一个是当前选择的过滤器设置：

function todos(state = [], action) {
// 省略处理逻辑…
return nextState
}

function visibleTodoFilter(state = ‘SHOW_ALL’, action) {
// 省略处理逻辑…
return nextState
}

let todoApp = combineReducers({
todos,
visibleTodoFilter
})
当你触发 action 后，combineReducers 返回的 todoApp 会负责调用两个 reducer：

let nextTodos = todos(state.todos, action)
let nextVisibleTodoFilter = visibleTodoFilter(state.visibleTodoFilter, action)
然后会把两个结果集合并成一个 state 树：

return {
todos: nextTodos,
visibleTodoFilter: nextVisibleTodoFilter
}
虽然 combineReducers() 是一个很方便的辅助工具，你也可以选择不用；你可以自行实现自己的根 reducer
5. Redux store 保存了根 reducer 返回的完整 state 树。
这个新的树就是应用的下一个 state！所有订阅 store.subscribe(listener) 的监听器都将被调用；监听器里可以调用 store.getState() 获得当前 state。

现在，可以应用新的 state 来更新 UI。如果你使用了 React Redux 这类的绑定库，这时就应该调用 component.setState(newState) 来更新。

参考链接： https://www.redux.org.cn/