Redux 概述
2018-07-27 本文已影响20人
iOS_愛OS
Action 一个对象 数据。
使用 store.disatch(action) 将 action 传给 store
调用 dispatch:
- 被绑定的 action 创建函数 来自动 dispatch:
const boundAddTodo = (text) => dispatch(addTodo(text))
const boundCompleteTodo = (index) => dispatch(completeTodo(index))
boundAddTodo(text);
boundCompleteTodo(index);
- store.dispatch() 调用 dispatch()
- react-redux 提供的 connect() 帮助器来调用
- bindActionCreators() 可以自动把多个 action 创建函数 绑定到 dispatch() 方法上。
使用 combineReducers 合并多个 redux
import { combineReducers } from 'redux';
// 会自动传入 state 和 action ?????
const todoApp = combineReducers({
visibilityFilter,
todos
})
export default todoApp;
注意上面的写法和下面完全等价:
export default function todoApp(state = {}, action) {
return {
visibilityFilter: visibilityFilter(state.visibilityFilter, action),
todos: todos(state.todos, action)
}
}
最终写法
import { combineReducers } from 'redux' // 获取 combineReducers 函数
import * as reducers from './reducers' // 把所有 顶层 reducers 引入文件,合并成一个变量名 reducers
const todoApp = combineReducers(reducers) // 把该变量 reducers 传入函数 combineReducers(redecers)
Store
Store 就是把action, reducer 联系到一起的对象
Redux 应用只有一个单一的 store
Store 的职责
维持应用的 state;
1. 提供 getState() 方法获取 state;
2. 提供 dispatch(action) 方法更新 state;
3. 通过 subscribe(listener) 注册监听器;
4. 通过 subscribe(listener) 返回的函数注销监听器。
创建 Store
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
// 也可以用 初始化 的 state 创建 store
let store = createStore(todoApp, window.STATE_FROM_SERVER)
数据流
先创建 store
let store = createStore(reducers)
1. 调用 store.dispatch(action)
2. 把 action 和 当前 state 传入 reducers
3. reducers 把多个子 reducer 输出合并为一个单一的 state 树 (利用 combineReducers() 合并)
4. store 保存 新的 state 树, 这时 所有订阅了 store.subscribe(listener) 监听器会被调用
可以在监听器中 调用 store.getState() 获得当前 state