Todolist(redux版本)

1.创建一个项目

npm i create-react-app -g
create-react-app  项目名

2.在项目中下载路由和redux

npm i react-router-dom redux

3.在入口文件引入Provider传递store

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

4.创建一个仓库

import {createStore} from 'redux'

import reducer from './reducer'

export default createStore(reducer)

5.使用combineReducers合并各组件的reducer

import {combineReducers} from 'redux'
import todoReducer from '../components/todo/reducer'
var reducer=combineReducers({
    todo:todoReducer
})
export default reducer

6.创建一个组件Todo和reducer.js文件，设置初始值为两个空数组
7.对组件页面进行渲染
8.connect方法导出组件

export default connect((state)=>state)(Todo)

9.创建actionCreater.js 文件，存放action

import {ADD,DEL,MODIFY,FIND} from './actionType'

10.创建 actionType.js 文件，存放 type 常量

export const ADD = 'ADD'
export const DEL = 'DEL'
export const MODIFY = 'MODIFY'
export const FIND = 'FIND'

11.增
创建add方法，在actionCreater.js中调用add方法，把输入框的内容传给payload,并返回action,reducer.js中接收数据给数组

 add=(e)=>{
        if(e.keyCode===13){
            if(!e.target.value) return
            this.props.dispatch(actionCreater.Add(e.target.value))
            e.target.value = ''
        }
    }

12.删
创建del方法，在actionCreater.js中调用del方法，删除传递的id相对的数据

del=(e)=>{
        if(window.confirm('确认删除该项吗？')){
            this.props.dispatch(actionCreater.Del(e.target.id))
        }
    }
   
    

13.改
创建modify方法，在actionCreater.js中调用modify方法，修改传递的id相对的数据

 modify=(e)=>{
        let txt = prompt('请输入要修改的内容')
        if(!txt) return
        this.props.dispatch(actionCreater.modify(e.target.id,txt))
    }

14.查
创建find方法，在actionCreater.js中调用find方法，传递id和内容，reducer.js 中 FIND 动作中遍历数组，将含有关键字的数据传入空 数组

find=(e)=>{
        if(!this.refs.inp.value) return
        let keyWords = this.refs.inp.value
        this.props.dispatch(actionCreater.Find(keyWords))
        this.refs.inp.value = ''
    }