[JavaScript知识库]TodoList之Redux初体验

“todolist的Redux实现至少要默写五遍哦”，Dell Lee老师用最温柔的语气说最狠的话~
好嘞，老师，我这就去
效果图

代码
index.js就不粘了

import React,{Component} from 'react';
import {Input,Button,List} from 'antd';
import store from "./store/store";
import 'antd/dist/antd.css';
import './App.css';
import {getInputChangeAction,getBtnClick,deleteItem} from "./store/ActionCreators";


class TodoList extends Component{
    constructor(props) {
        super(props);
        this.state={
            inputValue:'',
            list:[]
        }
        this.handleInputChane=this.handleInputChane.bind(this);
        this.handleBtnClick=this.handleBtnClick.bind(this);
        this.handleStoreChange=this.handleStoreChange.bind(this);
        store.subscribe(this.handleStoreChange);
    }
    render() {
        return (
            <div>
                <div>
                    <Input
                        style={{width:'300px',marginTop:"10px",marginRight:'10px',marginLeft:'10px'}}
                        value={this.state.inputValue}
                        onChange={this.handleInputChane}
                    />

                    <Button
                        onClick={this.handleBtnClick}
                    >
                    添加
                    </Button>
                </div>
                <List
                    style={{width:'300px',marginTop:'10px',marginLeft:'10px'}}
                    dataSource={this.state.list}
                    renderItem={(item,index)=>(
                        <List.Item
                            style={{marginLeft:'10px'}}
                            onClick={this.handelItemClick.bind(this,index)}
                        >{item}
                        </List.Item>
                    )}
                />
            </div>
        );

    }
    handleInputChane(e){
        const action=getInputChangeAction(e.target.value)
        store.dispatch(action)

    }
    handleBtnClick(){
        const action=getBtnClick();
        store.dispatch(action)

    }
    handelItemClick(index){
        const action=deleteItem(index)
        store.dispatch(action)

    }
    handleStoreChange(){
        this.setState(store.getState());
    }
}

export default TodoList;

store文件夹中内容
1.store.js

import {createStore} from "redux";
import reducer from "./reducer";


const store=createStore(reducer,

    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

reducer.js

import {ADDITEM,DELETEITEM,CHANGEINPUT} from "./ActionType";
const defaultState={
    inputValue:'',
    list:[]
}

export default (state=defaultState,action)=>{
    if (action.type === CHANGEINPUT){
        const newState=JSON.parse(JSON.stringify(state))
        newState.inputValue=action.value
        return newState;
    }
    if (action.type===ADDITEM){
        const newState=JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue);
        newState.inputValue='';
        return newState;
    }
    if (action.type===DELETEITEM){
        const newState=JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index,1);
        return newState;
    }
    return state;

}

ActionType.js

export const CHANGEINPUT='input_change';
export const ADDITEM='add_item';
export const DELETEITEM='delete_item';

ActionCreators.js

import {CHANGEINPUT,ADDITEM,DELETEITEM} from "./ActionType";

export const getInputChangeAction = (value) => ({
    type:CHANGEINPUT,
    value
});

export const getBtnClick = ()=>({
    type:ADDITEM
})

export const deleteItem = (index) => ({
    type:DELETEITEM,
    index
})

又是在半夜更，又是匆匆忙忙写，我也不想啊
整个过程步骤：

1. npx create-react-app todolist-redux-re

2. cd todolist-redux-re

3. npm install antd --save

4. npm install redux --save

5. npm start

6. 删除多余文件，精简项目

7. import React,{Component} from ‘react’

8. 修改代码，初始化等

9. 引入 antd的css文件，以及组件

10. 构建组件 ，添加事件方法，修改this域指针。

11. 创建store文件夹，并创建store.js，ActionType.js，ActionCreators.js，reducer.js文件
    ActionType中记录每个action中type的值；ActionCreators.js文件中存放产生action的方法，需要importActionType的types；app.js需要引入store，ActionCreators.js，store再dispatch这些action；store文件中需要引入reducer。

    容易犯的错误：

    1. 忘记引入’antd/dist/antd.css’
    2. Button的onClick事件绑定错误 this.handleBtnClick写成this.state.handleBtnClick。state身上没有方法的啊喂