初识Redux中的Action, Reducer, Store

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 (
      

        
A Redux Example, open console to check results.
        add
        reduce
      
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

参考和quickstart

• 参考:
  • http://www.redux.org.cn/
• quickstart:
  • https://github.com/react-guide/redux-tutorial-cn#redux-tutorial
  • https://egghead.io/courses/getting-started-with-redux