初识Redux中的Action, Reducer, Store

作者: Apolo_Du | 来源:发表于2018-08-23 04:42 被阅读0次

    Redux 是什么

    Redux 是一个 JavaScript 状态容器,提供可预测化的状态管理

    state, store 和 action

    • 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action (描述如何处理state的对象)。
    • 为了实现根据 action 的信息来改变 state 树,你需要编写 reducers。

    示意图:

    redux的工作流程

    初始化 Redux

    • 安装依赖项
    npm install --save redux
    
    // 安装react 支持
    
    npm install --save react-redux
    
    npm install --save-dev redux-devtools
    

    Redux 中的 action, reducer 和 store

    创建一个初始 state

    const initialState = {
      count: 0
    };
    

    action

    • 一个具有 type 属性的哈希对象, 作为 reducer 函数中switch语句的开关.
    • 创建一个action:
    // create actions
    const ADD_ACTION = "ADD";
    const REDUCE_ACTION = "REDUCE";
    
    const add = num => {
      return {
        type: ADD_ACTION,
        num
      };
    };
    
    const reduce = num => {
      return {
        type: REDUCE_ACTION,
          num
      };
    }; 
    

    reducer ( 状态处理函数 ) :

    • reducer的作用 :

      • 根据 action 对象的type 来更新状态.
    • reducer的工作方式 :

      • 接收一个 state 参数, 作为初始的 state
      • 接收一个action对象, 在函数体中用 switch 语句 判断 action 的type, 然后定义相应的处理方式( 返回新的 state 对象) .
    • 一个 reducer 函数示例:

      • 在示例中, 我们根据 action.type 属性来执行对应的 switch 语句

      • redux 要求, reducer 每次返回的对象(state)必须是新的对象.

        • 所以我们可以在函数体中创建新对象, 或者是通过 Object.assign({}, ...sources)的方法来实现.
    const reducer = (state = initialState, action) => {
      switch (action.type) { 
          case "ADD": 
            return Object.assign({}, state, { 
                count: state.count + action.num 
            }); 
    
          case "REDUCE": 
            return Object.assign({}, state, { 
                count: state.count - action.num 
             }); 
    
          default: 
             return state;
        }
    };
    

    store 对象: state状态管理器

    • 创建一个 store 状态管理器
      • 我们使用 redux 包提供的 createStore() 函数来创建一个 store 对象.
    const reduxStore = createStore(reducer); 
    

    store 对象 API

    • 操作state
      • state 的变化要通过 store对象的 dispatch() 方法来实现 (传递一个 action 对象给 reducer处理.)
      • 必须要通过 store API 操作 state, react 中的 view 才会更新.
    store.dispatch(action)
    
    • 获取state
    store.getState();
    

    redux 工作流程

    • 首先声明 action 对象
      • 需要声明 type 属性.
    • 定义 reducer 函数
    • 创建 store 对象.
      let store = createStore(reducer)
      • 调用 store 对象API

    action, Reducer, store 之间的关系

    • action 是一个哈希对象.
    • reducer 中定义如何根据 action 来操作 state
    • store 接收 reducer 作为参数.
      • 通过 store 的 api 来接收 action 以调用 reducer
    • 对象的创建:
    const { createStore } = Redux
    let action = {type: 'yyy'}
    const reducer = (state, action) => { xxxxx }
    const store =  createStore(reducer)
    

    示例代码:

    点击这里运行示例代码

    import React from "react";
    import ReactDOM from "react-dom";
    import Redux, {createStore} from "redux";
    
    // create actions
    const ADD_ACTION = "ADD";
    const REDUCE_ACTION = "REDUCE";
    
    const add = num => {
      return {
        type: ADD_ACTION,
        num
      };
    };
    
    const reduce = num => {
      return {
        type: REDUCE_ACTION,
        num
      };
    };
    
    // initialize a state
    const initialState = {
      count: 0
    };
    
    // create a reducer
    const reducer = (state = initialState, action) => {
      switch (action.type) {
        case "ADD":
          return Object.assign({}, state, {
            count: state.count + action.num
          });
    
        case "REDUCE":
          return Object.assign({}, state, {
            count: state.count - action.num
          });
    
        default:
          return state;
      }
    };
    
    function getCurrentState() {
      return reduxStore.getState();
    }
    
    function addState() {
      reduxStore.dispatch(add(1));
      console.log(getCurrentState());
    }
    
    function reduceState() {
      reduxStore.dispatch(reduce(1));
      console.log(getCurrentState());
    }
    
    const reduxStore = createStore(reducer);
    console.log(reduxStore.getState());
    
    class App extends React.Component {
      constructor(props) {
        super(props);
        //初始化 state
        this.state = getCurrentState();
      }
    
      render() {
        return (
          <div>
            <h1>A Redux Example, open console to check results.</h1>
            <button onClick={addState}>add</button>
            <button onClick={reduceState}>reduce</button>
          </div>
        );
      }
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App/>, rootElement);
    

    参考和quickstart

    相关文章

      网友评论

        本文标题:初识Redux中的Action, Reducer, Store

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