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, 需要做的事值需要修改personreturn {...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, 需要做的事值需要修改personreturn {...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.jsimport {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, 需要做的事值需要修改personreturn {...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'));

效果如下