使用react-redux实现todolist的增删改

1.创建一个react项目

(1).npm i create-react-app -g
(2).create-react-app xxx(项目名称)
(3).cd xxx
(4.).npm start
启动项目后会浏览器会自动打开页面
出现react的标志即为打开成功

2.安装react-redux

运行npm i redux react-redux --save-dev

3.建立store用于数据传输

在App.js文件中引入
import {Provider} from ‘react-redux’
import store from ‘./store’

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux'
import store from './store'

ReactDOM.render(
<Provider store={store}>
   <App />
</Provider>   , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

并使用将包裹起来

在store文件中建立总的reducer文件

4.在src中建立组件

1.在src中建立todos文件，其中分别建立actionCreator文件用来书写行为代码以及tdos的单独reducer文件
2.在store文件的index.js文件中引入

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

var store =createStore(reducer);

export default store;

并在store文件夹中的reducer文件中引入

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

var store =createStore(reducer);

export default store;

5.实现todolist

(1).index文件中引入

import actionCreator from './actionCreator'
import {connect} from 'react-redux'

（2）.在class Todos extends Component中书写

class Todos extends Component {
      add=(e)=>{
          if(e.keyCode===13){
              if(e.target.value.trim()==="")return;
              this.props.addAction(e.target.value);
              e.target.value=""
          }
      }

      delete(id){
          let result = window.confirm("是否删除")
          if(result===true){
           this.props.delAction(id)
          }
      }

      write(id){
        var text =  prompt("请输入要修改的内容")
         if(text !==""){
           this.props.writeAction(text,id)
         }
      }

    render() {
        let todos = this.props.TodosMod.todos
        return (
            <div>
                <input  type="text" onKeyUp={this.add}/>
                <ul>
                    {
                    todos.map((item)=>{
                        return <li key={item.id} >{item.text} 
                        <button onClick={()=>{this.delete(item.id)}}>删除</button> 
                        <button onClick={()=>{this.write(item.id)}}>修改</button></li>
                    })
                 }
                </ul>
            </div>
        )
    }
}

render中的u组件绑定数据，并在其中写好事件。
最后再导出

var mapState=(state)=>state
export default connect(mapState,actionCreator)(Todos);

（3）.actionCreator文件中写入

export default {
    addAction(text){
        return{
            type:"ADD",
            text
        }
    },
    delAction(id){
        return{
            type:"DEL",
            id
        }
    },
    writeAction(text,id){
        return{
        type:"WRITE",
        text,
        id
        }
    }
}

（4）.最后在reducer文件中写入

const initialState = {
    todos:[
        {
            "id":1,
            "text":"hello twohorses"
        }
    ]
}

export default (state = initialState,{type,text,id})=>{
    switch(type) {
        case "ADD":
            var newState = {...state};
            newState.todos.push({
                id:Date.now(),
                text
            })
            return newState;
        case "DEL":
            newState = {...state};
            newState.todos.splice(text,1);
            return newState;

        case "WRITE":
            newState = {...state};
            newState.todos.filter((item)=>{
                if(id === item.id){
                  item.text = text  
                }
                return newState;
            })
            return newState;

     default :
         return state
    }
}

最终效果