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'));

效果以下