react 中的redux实现数据的添加删除

1、新建store
新建component
在store新建index.js代码如下：

import {createStore} from "redux";



const store = createStore();


export default store;

2、在store里创建文件夹reducer，在reducer里新建文件todo.js文件代码如下：

const defaultState = {
    inputVal: "",
    list: []

}
export default (state = defaultState, action) => {
   
            return state;
    }

3、在store里的index.js中引入todo 合并
代码如下：

import {createStore,combineReducers} from "redux";
import todo from "./reducers/todo"

let reducer = combineReducers({
    todo
})
 
const store = createStore(reducer);


export default store;

4、在component中创建input组件和list组件

import React, { Component, Fragment } from 'react'

export default class Input extends Component {
    render() {
        return (
            <Fragment>
              <input type="text" />
              <button>点击</button>
           </Fragment>

import React, { Component, Fragment } from 'react'

export default class List extends Component {
    render() {
        return (
            <Fragment>
            <ul>
            <li>111</li>
            </ul>
           </Fragment>

5、在App.js中引入input 和list

import React, { Component } from 'react'
import Input from './component/input'
import List from './component/list'

export default class App extends Component {
  
    
    render() {
        return (
            <div>
                <Input/>
                <List/>
            </div>
        )
    }
}

6、在input.js中引入store并添加事件订阅

import React, { Component, Fragment } from 'react'
import store from "../store"
export default class Input extends Component {
    constructor() {
        super();
        this.state = store.getState();
        store.subscribe(this.handleUpdate.bind(this))
    }

    render() {
        let { inputVal } = this.state.todo;
        return (
           <Fragment>
              <input type="text" />
              <button>点击</button>
           </Fragment>
        )
    }
  
    handleChange(e) {
        let val = e.target.value;
       
    }
    handleUpdate() {
        this.setState(store.getState());
    }

}

7、在src中新建文件夹action在action中新建文件 actionCreator.js

export const changeAction = (val)=>({
    type:"TODO_CHANGE",
    value:val
})

8、在input,js中引入

import { changeAction} from '../action/actionCreator'

通过store.dispatch发送Action

  store.dispatch(changeAction(val));

9、reducer/todo.js(拷贝加渲染数据)

const defaultState = {
    inputVal: "",
    list: []

}
export default (state = defaultState, action) => {
    switch (action.type) {
        case "TODO_CHANGE":
            let changeState = Object.assign({}, state);//拷贝
            changeState.inputVal = action.value;//渲染数据
            return changeState;
        default:
            return state;
    }

}

10、在input.js中设置点击添加数据

  <Fragment>
               <input type="text" value={inputVal} onChange={this.handleChange.bind(this)} />
            
                <button onClick={this.handleAdd.bind(this)}>添加</button>
            </Fragment>

11、在actionCreator.js中继续写

export const todoAdd = {
    type:"TODO_ADD"
}

再回到input.js中引入

import { changeAction，todoAdd} from '../action/actionCreator'

handleAdd(){
	store.dispatch(todoAdd);
}

12、回到todo.js中 （目的可以进行添加但是不显示在页面上），下一步做遍历让数据渲染到页面上

  case "TODO_ADD":
            let addState = Object.assign({}, state);
            addState.list.push(addState.inputVal);
            addState.inputVal = "";

13、回到list.js中引入

import store from "../store"

写上事件订阅,并添加删除按钮功能

export default class List extends Component {
    constructor() {
        super();
        this.state = store.getState();
        store.subscribe(this.handleUpdate.bind(this))
    }

完整代码：

import React, { Component } from 'react'
import store from "../store"
import { todoDel } from "../action/actionCreator"
export default class List extends Component {
    constructor() {
        super();
        this.state = store.getState();
        store.subscribe(this.handleUpdate.bind(this))
    }
   render() {
        let { list } = this.state.todo
        return (
            <ul>
                {
                    list.map((item, index) => (
                        <li key={index}>{item}
                            <button onClick={this.handleDel.bind(this,index)}>删除</button>
                        </li>
                    ))
                }
            </ul>
        )
    }
    handleDel(index) {
        store.dispatch(todoDel(index))
    }
    handleUpdate() {
        this.setState(store.getState());
    }
}

14、转到actionCreator.js中

export const todoDel = (val)=>({
    type:"TODO_DEL",
    value:val
})

15、在list.js中引入

import { todoDel } from "../action/actionCreator"

handleDel(index) {
        store.dispatch(todoDel(index))
    }

再回到todo.js中 做拷贝 做删除

  case "TODO_DEL":
            let delState = Object.assign({}, state);
            delState.list.splice(action.value,1);
         
            return delState;

16、最终效果（实现了添加删除）

后续的一些问题
没有结构赋值

没匹配对应的
没return