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

效果如下