React入门-9.redux你好

JerrysBlog 2019-06-29

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. 代码整理

在具体代码实施的时会遇到大量的数据,数据多了就需要模块化来进行管理。目录结构如下
React入门-9.redux你好

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

效果如下

React入门-9.redux你好

相关推荐