18 react react-redux 的编写 TodoList
1. 安装 react-redux
yarn add react-redux
2. react-redux 编写 TodoList 使所有子组件 都能使用 store
#index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store'
const App = (
// 使用 Provider 使 Provider 的子组件 都能获取到 store
<Provider store={store}>
<TodoList />
</Provider>
);
ReactDOM.render(App, document.getElementById('root'));
# TodoList.js
import React from 'react';
import { connect } from 'react-redux';
const TodoList = (props) => {
const { input_value, list, inputValueChange, addItem, delItem } = props;
return (
<div>
<div>
<input value={input_value} onChange={inputValueChange} />
<button onClick={addItem} type="button">提交</button>
</div>
<div>
<ul>
{
list.map((item, key)=>{
return <li key={key} index={key} onClick={delItem}>{item}</li>
})
}
</ul>
</div>
</div>
);
}
// 将 store 的 state 映射到 TodoList 的 props
const mapStateToProps = ( state )=>{
// 将 TodoList 的 props 的 input_value 的值 映射到 state 下的 input_value
// 将 TodoList 的 props 的 list 的值 映射到 state 下的 list
return {
input_value : state.input_value,
list : state.list
}
}
// props 如何对 state 内的 数据做修改 的 action 定义
// 使用 connect 之后 会自动对 redux state 修改之后进行订阅
const mapPropsToDispatch = (dispatch)=>{
return {
// 修改 输入框内 input_value 的值
inputValueChange(e){
const action = {
type : 'input_value_change',
value : e.target.value
}
console.log(action);
dispatch(action);
},
// 添加 list item
addItem(){
const action = {
type : 'add_item'
}
dispatch(action);
},
// 删除 list item
delItem(e){
const action = {
type : 'del_item',
value : e.target.getAttribute('index')
}
dispatch(action);
}
}
}
// 第一个参数为 当前组件 state 与 props 的 映射关系
// 第二个参数为 props 对当前组件的 state 修改 进行 派发
export default connect(mapStateToProps, mapPropsToDispatch)(TodoList);
#store/index.js
import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
#store/reducer.js
const defaultState = {
input_value : '',
list : []
}
export default (state = defaultState, action)=>{
if(action.type === 'input_value_change'){
const newState = JSON.parse(JSON.stringify(state));
newState.input_value = action.value;
return newState;
}
if(action.type === 'add_item'){
const newState = JSON.parse(JSON.stringify(state));
console.log(newState);
newState.list.push(newState.input_value);
newState.input_value = ''
return newState;
}
if(action.type === 'del_item'){
const newState = JSON.parse(JSON.stringify(state));
newState.list.splice(action.value, 1);
return newState;
}
return state;
}
