美文网首页
Redux 概述

Redux 概述

作者: iOS_愛OS | 来源:发表于2018-07-27 10:16 被阅读20次

    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

    相关文章

      网友评论

          本文标题:Redux 概述

          本文链接:https://www.haomeiwen.com/subject/udswmftx.html