（二十一）Redux(4)使用actionCreator 统一创

文件目录

image.png

实现这样的 增加 和删除，用redux 和antd

image.png

src\store\actionCreators.js

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM,DELETE_TODO_ITEM} from './actionTypes'

export const getInputChangeAction = (value) => ({
    type: CHANGE_INPUT_VALUE,
    value
})
export const getAddItemAction = () => ({
    type: ADD_TODO_ITEM,
})
export const getDeleteItemAction = (index) => ({
    type: DELETE_TODO_ITEM,
    index
}) 

src\store\actionTypes.js

export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELETE_TODO_ITEM = 'delete_todo_item';

src\store\index.js

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

// 创建 store 的时候把 reducer 的 公用的数据传给 store
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store

src\store\reducer.js

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes'


// 存放公用的数据
const defaultDate = {
    inputValue: '',
    list: ['1', '2', '3', '4', '5']
}
// reducer 返回的必须是一个函数，这个函数接收两个参数(state 和 action)
// state = defaultDate 表示 Store 上一次 存储的数据，action 表示用户传过来的话
// reducer 可以接收state，但是不能修改state
export default (state = defaultDate, action) => {
    console.log(state, action);
    if (action.type === CHANGE_INPUT_VALUE) {
        const newState = JSON.parse(JSON.stringify(state))
        // 把inputValue改成最新的value
        newState.inputValue = action.value
        return newState
    }
    if (action.type === ADD_TODO_ITEM) {
        const newState = JSON.parse(JSON.stringify(state))
        // newState.inputValue  上一次action type中 change_input_value改变的Value
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if (action.type === DELETE_TODO_ITEM) {
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index, 1)
        return newState
    }
    return state
    // 返回 state
}

src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';


ReactDOM.render(
  <TodoList />,
  document.getElementById('root')
);

src\TodoList.js

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from './store/index.js'
import { getInputChangeAction, getAddItemAction, getDeleteItemAction } from './store/actionCreators'
// import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './store/actionTypes'
class TodoList extends Component {
    constructor(props) {
        super(props)
        // 这时候组件的数据来源于 store
        this.state = store.getState()
        console.log(this.state);  //{inputValue: "", list: Array(0)}
        console.log(store.getState());  //{inputValue: "", list: Array(0)}
        this.handleInputChange = this.handleInputChange.bind(this)
        // 组件去订阅store,只要store发生改变，this.handleStoreChange就会执行一次
        this.handleStoreChange = this.handleStoreChange.bind(this)
        // 监听store数据的变化
        store.subscribe(this.handleStoreChange)

        this.handleBtnClick = this.handleBtnClick.bind(this)
    }
    render() {
        return (
            <div style={{ marginTop: '10px', marginLeft: '10px' }}>
                <div>
                    <Input value={this.state.inputValue} placeholder="todo info" style={{ width: '300px', marginRight: '10px' }} onChange={this.handleInputChange} />
                    <Button type="primary" onClick={this.handleBtnClick}>提交</Button>
                    <List style={{ marginTop: '10px', width: '300px' }}
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item, index) => (
                            <List.Item onClick={this.handleItemDelete.bind(this, index)}>
                                {item}
                            </List.Item>
                        )}
                    />
                </div>

            </div>
        )

    }
    handleInputChange(e) {
        // 1.创建action方法
        // const action = {
        //     type: CHANGE_INPUT_VALUE,
        //     value: e.target.value
        // }
        //2.调用store 的 dispatch把 action 派发给store
        //Store 接收到 action 会自动帮我们把 之前的数据（previousState）和 action  传递给 Reducer
        const action = getInputChangeAction(e.target.value)
        store.dispatch(action)
        console.log(e.target.value);
    }
    handleStoreChange() {
        this.setState(store.getState())
    }
    handleBtnClick() {
        // const action = {
        //     type: ADD_TODO_ITEM
        // }
        const action = getAddItemAction()
        store.dispatch(action)
    }
    handleItemDelete(index) {
        // const action = {
        //     type: DELETE_TODO_ITEM,
        //     index
        // }
        const action = getDeleteItemAction(index)
        store.dispatch(action)
        console.log(index);
    }
}
export default TodoList

E:\20201017-React\redux-todolist\actionTypes_redux\todolist