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

上一篇下一篇

猜你喜欢

热点阅读