Redux 是什么

Redux 是一個(gè) JavaScript 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理

state, store 和 action

• 應(yīng)用中所有的 state 都以一個(gè)對(duì)象樹(shù)的形式儲(chǔ)存在一個(gè)單一的 store 中。 惟一改變 state 的辦法是觸發(fā) action (描述如何處理state的對(duì)象)。
• 為了實(shí)現(xiàn)根據(jù) action 的信息來(lái)改變 state 樹(shù)，你需要編寫(xiě) reducers。

示意圖:

redux的工作流程

初始化 Redux

• 安裝依賴(lài)項(xiàng)

npm install --save redux

// 安裝react 支持

npm install --save react-redux

npm install --save-dev redux-devtools

Redux 中的 action, reducer 和 store

創(chuàng)建一個(gè)初始 state

const initialState = {
  count: 0
};

action

• 一個(gè)具有 type 屬性的哈希對(duì)象, 作為 reducer 函數(shù)中switch語(yǔ)句的開(kāi)關(guān).
• 創(chuàng)建一個(gè)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 ( 狀態(tài)處理函數(shù) ) :

• reducer的作用 :

  • 根據(jù) action 對(duì)象的type 來(lái)更新?tīng)顟B(tài).

• reducer的工作方式 :

  • 接收一個(gè) state 參數(shù), 作為初始的 state
  • 接收一個(gè)action對(duì)象, 在函數(shù)體中用 switch 語(yǔ)句 判斷 action 的type, 然后定義相應(yīng)的處理方式( 返回新的 state 對(duì)象) .

• 一個(gè) reducer 函數(shù)示例:

  • 在示例中, 我們根據(jù) action.type 屬性來(lái)執(zhí)行對(duì)應(yīng)的 switch 語(yǔ)句

  • redux 要求, reducer 每次返回的對(duì)象(state)必須是新的對(duì)象.

    • 所以我們可以在函數(shù)體中創(chuàng)建新對(duì)象, 或者是通過(guò) Object.assign({}, ...sources)的方法來(lái)實(shí)現(xiàn).

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 對(duì)象: state狀態(tài)管理器

• 創(chuàng)建一個(gè) store 狀態(tài)管理器
  • 我們使用 redux 包提供的 createStore() 函數(shù)來(lái)創(chuàng)建一個(gè) store 對(duì)象.

const reduxStore = createStore(reducer); 

store 對(duì)象 API

• 操作state
  • state 的變化要通過(guò) store對(duì)象的 dispatch() 方法來(lái)實(shí)現(xiàn) (傳遞一個(gè) action 對(duì)象給 reducer處理.)
  • 必須要通過(guò) store API 操作 state, react 中的 view 才會(huì)更新.

store.dispatch(action)

• 獲取state

store.getState();

redux 工作流程

• 首先聲明 action 對(duì)象
  • 需要聲明 type 屬性.
• 定義 reducer 函數(shù)
• 創(chuàng)建 store 對(duì)象.
  let store = createStore(reducer)
  • 調(diào)用 store 對(duì)象API

action, Reducer, store 之間的關(guān)系

• action 是一個(gè)哈希對(duì)象.
• reducer 中定義如何根據(jù) action 來(lái)操作 state
• store 接收 reducer 作為參數(shù).
  • 通過(guò) store 的 api 來(lái)接收 action 以調(diào)用 reducer
• 對(duì)象的創(chuàng)建:

const { createStore } = Redux
let action = {type: 'yyy'}
const reducer = (state, action) => { xxxxx }
const store =  createStore(reducer)

示例代碼:

點(diǎn)擊這里運(yùn)行示例代碼

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

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