（十九）Redux(2)

实现功能是这样的：可以增加和删除item，

image.png

项目目录

image.png

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

// 存放公用的数据
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'
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
        store.dispatch(action)
        console.log(e.target.value);
    }
    handleStoreChange() {
        this.setState(store.getState())
    }
    handleBtnClick() {
        const action = {
            type: 'add_todo_item'
        }
        store.dispatch(action)
    }
    handleItemDelete(index) {
        const action = {
            type: 'delete_todo_item',
            index
        }
        store.dispatch(action)
        console.log(index);
    }
}
export default TodoList

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