react + redux 基本用法

使用redux 目的

在react中組件與組件之間的通訊很麻煩，因而借用redux進行第三方的通訊，經過把數據存儲在store裏，實現各個組件間快速通訊

redux 基礎

1. 核心

• state：普通對象
• action：JS 普通對象，用來描述發生了什麼，store 數據的惟一來源
• reducer：把 action 和 state 串起來。接收 state 和 action 做爲參數，並返回新的 state 的函數。

2. 三大原則

• 單一數據源：只存在惟一一個store
• state只讀：惟一改變 state 的方法就是觸發 action
• 使用純函數進行修改：reducer

3. 主要組件

• action

  經過dispatch傳遞數據到store

• reducer

  描述如何響應action更新state

• store

  維持應用的 state；
  提供 getState() 方法獲取 state；
  提供 dispatch(action) 方法更新 state；
  經過 subscribe(listener) 註冊監聽器;
  經過 subscribe(listener) 返回的函數註銷監聽器。

安裝redux

npm install redux --S

準備工做

詳情請移步個人github

1. 建立 store

// store/index.js

import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(
    reducer,
);
export default store;

2. 建立 reducer

// store/reducer.js

// 初始 state
const initState={
    inputValue:'',
    list:[]
};
// reducer能夠接收state，可是毫不能修改state，返回的是新的state
export default (state = initState,action)=>{    
    return state;
}

流程

1. store 的 dispatch(action) 傳遞 action 給 store，store 會自動轉發給 reducer

InputChange = (e) => {
    // 告訴store, 輸入的類型和輸入框中的值
    const action = {
        // type 屬性 必須有
        type:'change_input_value',
        value: e.target.value,
    };
    // 把 action 傳給 store
    store.dispatch(action);
    // store 自動傳給 reducer
};

2. reducer 接收信息，並返回給 store 一個 newState

// store/reducer.js

export default (state = initState,action)=>{
    if (action.type==='change_input_value'){
        const newState = JSON.parse(JSON.stringify(state)); //簡單的深拷貝
        newState.inputValue = action.value;
        return newState;
    }   
}

3. 監聽 state 的變化

constructor(props){
    super(props);
    this.state = store.getState();
    //監聽store裏面的變化，只要store裏面的數據發生改變，則當即執行subscribe函數裏的函數
    store.subscribe(this.handleStoreChange)
}

StoreChange=()=>{
    this.setState(store.getState());
    // 感知store發生變化以後，從store裏獲取最新的數據，而後進行設置
};