redux与vuex一样是一个组件的状态（数据）管理器，当我们需要在项目各组件中共享数据时可以使用。
image
image.gif
redux是一个第三方的库，本身和react没有任何关系，react-redux也是一个第三方库，可以帮助我们在react项目中更好的使用redux。
简介
image
image.gif
redux流程图
store（状态库）：用于存放组件中的state。
action（动作）：redux将每一次更改动作定义为一个action，如
const action = { type:'input_change', val:123 }
image.gif
reducers（执行）：是一个纯函数，将根据action的不同来修改state。
dispatch（分发）：组件中通过dispatch(action)，来实现动作的提交。
1
安装
npm install react react-redux --save
image.gif
2
用react-redux管理todoList数据
image
image.gif
action（动作）分析：
输入框输入
按钮提交
列表点击删除
3
创建action
image
image.gif
import actionTypes from './actionTypes'
const actionCreator = {
getInputChangeAction: (val) => ({
type: actionTypes.CHANGE_INPUT_VLAUE,
value: val
}),
btnClickAction: (val) => ({
type: actionTypes.BTN_CLICK,
value: val
}),
listDelAction: (val) => ({
type: actionTypes.LIST_DEL,
index: val
})
}
export default actionCreator;
image.gif
action的type定义为常量放在actionType.js中统一管理，以避免type手写出错的可能。
actionTypes.js
const types = {
CHANGE_INPUT_VLAUE: 'change_input_value',
BTN_CLICK: 'btn_click',
LIST_DEL: 'list_del'
}
export default types;
image.gif
4
定义reducer
reducer.js
import actionTypes from './actionTypes';
const defaultState = {
inputValue: '',
list: [],
};
export default (state = defaultState, action) => {
// reducer 可以接受state，但是绝不能修改state
const newState = JSON.parse(JSON.stringify(state));
switch (action.type) {
case actionTypes.CHANGE_INPUT_VLAUE:
newState.inputValue = action.value;
break;
case actionTypes.BTN_CLICK:
newState.list.push(action.value);
newState.inputValue = '';
break;
case actionTypes.LIST_DEL:
newState.list.splice(action.index, 1);
break;
default:
break;
}
return newState;
};
image.gif
5
创建store
index.js
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
image.gif
6
利用react-redux
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import store from './store'
import TodoList from './components/TodoList';
// if (process.env.NODE_ENV === "development") {
// require('./mock/index.js');
// }
ReactDOM.render(
,
document.getElementById('root')
);
image.gif
React-Redux 提供Provider组件，可以让容器组件拿到state。上面代码中，Provider在根组件外面包了一层，这样一来，TodoList的所有子组件就默认都可以拿到state了。
7
组件中创建state、dispatch的映射关系
const mapStateToProps = state => {
return {
value: state.inputValue,
list: state.list,
};
};
image.gif
const mapDispatchToProps = dispatch => {
return {
inputChange: e => dispatch(actions.getInputChangeAction(e.target.value)),
btnClick: value => dispatch(actions.btnClickAction(value)),
listClick: index => dispatch(actions.listDelAction(index)),
};
};
image.gif
意思就是将state与dispatch都映射到props，那么组件内就可以直接通过props来访问。
// ui组件
const TodoList = props => {
const { value, list, inputChange, btnClick, listClick } = props;
return (
{list.map((item, index) => {
return (
- listClick(index)}>
{item}
);
})}
);
};
image.gif
connect连接组件
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
image.gif
完整代码：TodoList.js
import React from 'react';
import { connect } from 'react-redux';
import actions from '../store/actionCreator';
const mapStateToProps = state => {
return {
value: state.inputValue,
list: state.list,
};
};
const mapDispatchToProps = dispatch => {
return {
inputChange: e => dispatch(actions.getInputChangeAction(e.target.value)),
btnClick: value => dispatch(actions.btnClickAction(value)),
listClick: index => dispatch(actions.listDelAction(index)),
};
};
// todolist组件目前只有dom可以写成函数组件以提升效率；
// ui组件
const TodoList = props => {
const { value, list, inputChange, btnClick, listClick } = props;
return (
{list.map((item, index) => {
return (
- listClick(index)}>
{item}
);
})}
);
};
// 容器组件
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
image.gif
这样就实现了通过react-redux管理组件状态（数据）。
image
image.gif
image
image.gif
全栈攻城狮进阶
关注微信公众号，第一时间获取好文章！
没有伞的孩子，只有努力奔跑。