redux與vuex一樣是一個組件的狀態(tài)（數(shù)據(jù)）管理器锈候，當(dāng)我們需要在項目各組件中共享數(shù)據(jù)時可以使用薄料。
?
redux是一個第三方的庫，本身和react沒有任何關(guān)系泵琳，react-redux也是一個第三方庫摄职，可以幫助我們在react項目中更好的使用redux。
簡介
?
redux流程圖
store（狀態(tài)庫）：用于存放組件中的state获列。
action（動作）：redux將每一次更改動作定義為一個action谷市，如
const action = { type:'input_change', val:123 }
reducers（執(zhí)行）：是一個純函數(shù)，將根據(jù)action的不同來修改state击孩。
dispatch（分發(fā)）：組件中通過dispatch(action)迫悠，來實現(xiàn)動作的提交。
1
安裝
npm install react react-redux --save
2
用react-redux管理todoList數(shù)據(jù)
?
action（動作）分析：
輸入框輸入
按鈕提交
列表點擊刪除
3
創(chuàng)建action
?
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;
action的type定義為常量放在actionType.js中統(tǒng)一管理巩梢，以避免type手寫出錯的可能创泄。
actionTypes.js
const types = {
CHANGE_INPUT_VLAUE: 'change_input_value',
BTN_CLICK: 'btn_click',
LIST_DEL: 'list_del'
}
export default types;
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;
};
5
創(chuàng)建store
index.js
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
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(
<Provider store={store}>
<TodoList />
</Provider>,
document.getElementById('root')
);
React-Redux 提供Provider組件括蝠，可以讓容器組件拿到state鞠抑。上面代碼中，Provider在根組件外面包了一層忌警，這樣一來碍拆，TodoList的所有子組件就默認(rèn)都可以拿到state了。
7
組件中創(chuàng)建state慨蓝、dispatch的映射關(guān)系
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)),
};
};
意思就是將state與dispatch都映射到props感混，那么組件內(nèi)就可以直接通過props來訪問。
// ui組件
const TodoList = props => {
const { value, list, inputChange, btnClick, listClick } = props;
return (
<div>
<div>
<input onChange={inputChange} value={value}></input>
<button onClick={() => btnClick(value)}>提交</button>
</div>
<ul>
{list.map((item, index) => {
return (
<li key={index} onClick={() => listClick(index)}>
{item}
</li>
);
})}
</ul>
</div>
);
};
connect連接組件
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
完整代碼：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可以寫成函數(shù)組件以提升效率礼烈；
// ui組件
const TodoList = props => {
const { value, list, inputChange, btnClick, listClick } = props;
return (
<div>
<div>
<input onChange={inputChange} value={value}></input>
<button onClick={() => btnClick(value)}>提交</button>
</div>
<ul>
{list.map((item, index) => {
return (
<li key={index} onClick={() => listClick(index)}>
{item}
</li>
);
})}
</ul>
</div>
);
};
// 容器組件
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
這樣就實現(xiàn)了通過react-redux管理組件狀態(tài)（數(shù)據(jù)）弧满。
?
?
全棧攻城獅進(jìn)階
關(guān)注微信公眾號，第一時間獲取好文章此熬！
沒有傘的孩子庭呜，只有努力奔跑。
