React入門-9.redux你好

Redux入門

1. 介紹

redux是js的狀態管理機制，與vuex相似，不過vuex是爲vue定製的。而redux並不是僅僅服務於react,在jquery,angular,甚至於原生的js中均可以使用。簡單來講，redux就是幫咱們管理數據的。

2. 核心概念

• state
  狀態，用於維護數據的一個對象，不能直接修改

  let initialState ={
    person: []
  }

• reducer
  action調用後會執行響應的reducer，reducer會執行響應操做返回數據狀態 state

  const reducer = function(state=initialState,action){
    switch(action.type){
      case ADD_TO_PERSON :
        // 在reducer中不能直接修改state, 須要作的事值須要修改person
        return {
          ...state,
          person:[...state.person,action.payload]
        }
      default :
        return state;
        
    }
  }
  const store = createStore(reducer);

• action
  定義動做，獲取參數，進而影響reducer的執行來改變或獲取state

  function addToPerson(name,age){
    return {
      type:ADD_TO_PERSON,
      payload:{
        name,
        age
      }
    }
  }
  // 分發動做
  store.dispatch(addToPerson('tom',18))

3. 完整案例

下面的代碼咱們經過create-react-app來建立項目，而後將下面的代碼插入到index.js中執行，固然若是咱們在實際開發中確定不會這麼用，須要將寫在特定地方，而後進行引用。

...
/* redux開始 */
//1. state數據初始狀態
let initialState ={
  person: []
}
const ADD_TO_PERSON = 'ADD_TO_PERSON'

//2. reducer,指定了應用狀態的變化如何響應 actions 併發送到store的。
const reducer = function(state=initialState,action){
  switch(action.type){
    case ADD_TO_PERSON :
      // 在reducer中不能直接修改state, 須要作的事值須要修改person
      return {
        ...state,
        person:[...state.person,action.payload]
      }
    default :
      return state;
      
  }
}
const store = createStore(reducer);

//3. action建立函數,添加
function addToPerson(name,age){
  // action對象，action是將數據從應用傳到store的有效載荷，是store數據的惟一來源，經過store.dispatch來調用
  return {
    type:ADD_TO_PERSON,
    payload:{
      name,
      age
    }
  }
}
console.log('-----',store.getState());
//4. 調用action完成person的保存
store.dispatch(addToPerson('tom',18))
console.log('-----',store.getState());

/* redux結束 */
...

4. 代碼整理

在具體代碼實施的時會遇到大量的數據，數據多了就須要模塊化來進行管理。目錄結構以下

• actions

該文件夾中定義項目中全部的動做

// index.js
import personAction from './personAction'

export {
  personAction
}

//personAction.js

import {ADD_TO_PERSON} from '../const'

export default {
  // action建立函數,添加
  addToPerson: function(name,age){
    // action對象，action是將數據從應用傳到store的有效載荷，是store數據的惟一來源，經過store.dispatch來調用
    return {
      type:ADD_TO_PERSON,
      payload:{
        name,
        age
      }
    }
  } 
}

• reducers

該文件夾中定義項目中全部的reducers

// index.js
import { combineReducers } from 'redux';
import personReducer from './personReducer'

export default  combineReducers({
  personReducer
});

//personReducer.js
import {personInitialState} from '../state/index.js'
import {ADD_TO_PERSON} from '../const'
// reducer,指定了應用狀態的變化如何響應 actions 併發送到store的。
const personReducer = function(state=personInitialState,action){
  switch(action.type){
    case ADD_TO_PERSON :
      // 在reducer中不能直接修改state, 須要作的事值須要修改person
      return {
        ...state,
        person:[...state.person,action.payload]
      }
    default :
      return state;
  }
}

export default personReducer;

• state

該文件夾中定義項目中全部的狀態

// index.js
import personInitialState from './personState'

export {
  personInitialState
}

//personState.js
export default {
  person: []
}

• const.js

該文件中定義項目中全部的常量

const ADD_TO_PERSON = 'ADD_TO_PERSON'

export {
  ADD_TO_PERSON
}

• index.js

import {createStore} from 'redux';
import Reducer from './reducers'

const store = createStore(Reducer);

export default store;

• src/index.js

// 導入react react-dom
import React from 'react';
import ReactDOM from 'react-dom';
import store from './store'
import {personAction} from './store/actions'
// 導入全局css
import './index.css';
// 導入根組件
import App from './App';
/* redux開始 */

console.log(store.getState().personReducer);
store.dispatch(personAction.addToPerson('tom',12))
console.log(store.getState().personReducer);

/* redux結束 */


// 在root元素上渲染根組件
ReactDOM.render(<App />, document.getElementById('root'));

效果以下