react简易todoList

1、文件目录

src
 --store
    ---index.js
    ---reducer.js
 --views
         ---Home.js
 App.js
 index.js

yarn add redux

2、根目录App.js , index.js

//App.js
import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route
} from "react-router-dom";
import Home from './views/Home'
class App extends Component {
    render() {
        return (
            <div>
                <Router>
                    <Switch>
                        <Route exact path="/" >
                          <Home/>
                        </Route>
                    </Switch>
                </Router>
            </div>
        );
    }
}
export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import "antd/dist/antd.css";
ReactDOM.render(<App />, document.getElementById('root'));

3、store

//index.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
let defaultState = {
    msg:"react",
    list:[]
}
//reducer可以接收state,但是不能直接修改state
export default (state=defaultState,action)=>{
    switch(action.type){
        case "change_input_value":
            let newState = {...state};
            newState.msg = action.value;
            return newState;
        case "add_todo_item":
            let nState = {...state};
            nState.list.push(nState.msg);
            nState.msg = ""
            return nState;
        case "delete_todo_item":
            let yState = {...state};
            yState.list.splice(action.value,1);
            return yState;
        default:
            return state;
    }
}

4、views

//Home.js
import React, { Component } from 'react';
import store from '../store'
import { Input, Button, List } from 'antd'
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
        store.subscribe(this.handleStoreChange);
    }
    render() {
        return (
            <div>
                <Input
                    style={{ width: 300, marginRight: "20px" }}
                    value={this.state.msg}
                    onChange={this.handleChange}
                    placeholder="Basic usage" />
                <Button type="primary" onClick={this.handleAdd}>添加</Button>
                <div>
                    <List
                        size="small"
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item,index) => <List.Item
                            actions={[<a key="list-loadmore-edit" onClick={this.handleDelete.bind(this,index)}>删除</a>]}
                        >{item}</List.Item>}
                    />
                </div>
            </div>
        );
    }
    handleChange = (e) => {
        let action = {
            type: "change_input_value",
            value: e.target.value
        }
        store.dispatch(action)
    }
    handleAdd = () => {
        let action = {
            type: "add_todo_item"
        }
        store.dispatch(action);
    }
    handleDelete=(index)=>{
        console.log(index)
        let action = {
            type:"delete_todo_item",
            value:index
        }
        store.dispatch(action);
    }
    handleStoreChange = () => {
        this.setState(store.getState())
    }
}
export default Home;