ToDoList 与antd和redux的结合

ToDoList.js（用于做页面逻辑的处理）

import React, { Component } from 'react';
import { getInputChangeAction, getButClickAction, getDeleteItem } from './store/actionCreators';
import ToDoListUI from './ToDoListUI';
import 'antd/dist/antd.css';
import store from './store'

class ToDoList extends Component {
    constructor(props) {
        super(props)
        this.state = store.getState()
        //.getState()是获取stroe值的一个方法
        this.inputChange = this.inputChange.bind(this)
        this.storeChange = this.storeChange.bind(this)
        this.butClick = this.butClick.bind(this)
        store.subscribe(this.storeChange)
        //订阅store的改变，只要store一改变，就执行StoreChange这个方法
    }
    inputChange = (e) => {
        // const action = {
        //     type: CHANGE_INPUT_VALUE,//type是对做的事情的一个描述
        //     value: e.target.value
        // }
        //与store通信通过action
        const action = getInputChangeAction(e.target.value)
        store.dispatch(action)
        //把action传递给store
    }
    storeChange = () => {
        this.setState(store.getState())
        //把新的store.getState()数据赋值给state
    }
    butClick = () => {
        // const action = {
        //     type: CHANGE_LIST_VALUE,//type是对做的事情的一个描述
        // }
        const action = getButClickAction()
        store.dispatch(action)
    }
    deleteItem = (index) => {
        // const action = {
        //     type: DELETE_LIST_ITEM,
        //     index
        // }
        const action = getDeleteItem(index)
        store.dispatch(action)
    }
    render() {
        return (
            <ToDoListUI
                inputValue={this.state.inputValue}
                list={this.state.list}
                inputChange={this.inputChange}
                butClick={this.butClick}
                deleteItem={this.deleteItem}
            />
        )
    }
}

export default ToDoList;

ToDoListUI.js （只用做页面渲染，不做任何逻辑处理）

import React, { Component } from 'react';
import { Input, Button, List } from 'antd';

class ToDoListUI extends Component {

    render() {
        return (
            <div style={
   
   { margin: '10px' }}>
                <Input placeholder="请输入内容"
                    value={this.props.inputValue}
                    style={
   
   { width: '300px', marginRight: '10px' }}
                    onChange={this.props.inputChange}
                ></Input>
                <Button type="primary" onClick={this.props.butClick}>提交</Button>
                <List
                    style={
   
   { width: '300px', marginTop: '10px' }}
                    bordered
                    dataSource={this.props.list}
                    renderItem={(item, index) => (
                        <List.Item onClick={(index) => this.props.deleteItem(index)}>
                            {item}
                        </List.Item>
                    )}
                />
            </div>
        )
    }
}
export default ToDoListUI

store目录

index.js

import {createStore} from 'redux'
import reducer from './reducer'


const store = createStore(reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
    //判断浏览器是否安装了redux的插件(REDUX_DEVTOOLS)，如果有就执行
    //创建一个公共存储仓库
    //拿到reducer传来的新state替换掉老的state

export default store;

reducer.js

import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_ITEM } from './actionTypes';
const defaultState = {
    inputValue: '',
    list: []
}
//默认数据
export default (state = defaultState, action) => {
    //state是整个仓库存储的数据，action是store传递来的一个对象
    if (action.type === CHANGE_INPUT_VALUE) {
        const newState = JSON.parse(JSON.stringify(state))
        //对state做一次深拷贝
        newState.inputValue = action.value
        return newState
    }
    if (action.type === CHANGE_LIST_VALUE) {
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if (action.type === DELETE_LIST_ITEM) {
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index, 1)
        return newState
    }
    return state
}
//reducer可以接受state，但是绝对不能改变state
//reducer.js返回一个数据和方法

actionTypes.js

export const CHANGE_INPUT_VALUE = 'change_input_value';
export const CHANGE_LIST_VALUE = 'change_list_value';
export const DELETE_LIST_ITEM = 'delete_list_item'

actionCreators.js

import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_ITEM } from './actionTypes';

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

export const getButClickAction = ()=>({
    type:CHANGE_LIST_VALUE,
})

export const getDeleteItem=(index)=>({
    type:DELETE_LIST_ITEM,
    index
})