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;

　　　　}