使用react -redux及react脚手架实现增删ToDoList

一、首先，来看下redux的官方图解

二、根据这张图的步骤，我们来一步一步实现ToDoList（记得下载redux和react-redux第三方依赖）

1、我们需要对入口文件进行更改

import React from 'react'
import ReactDOM from 'react-dom'

//Todolist  redux版组件
//将store 作为一个 prop 传给 Provider 组件，这样，<Provider>中包含的所有组件都能使用this.props来引入store仓库中的内容
import {Provider} from 'react-redux'
//引入组件，之后会创建
import Todolist from './todolistRedux/Todolist'
//引入store文件，之后会创建
import store from './todolistRedux/redux/store'

ReactDOM.render(
    //todolist组件
    <Provider store={store}>
        <Todolist/>
    </Provider>
    ,document.getElementById('root')
)

2、创建一个新的文件夹store.js，作为仓库

//applyMiddleware  是redux的原生方法，作用是将所有的中间件组成一个数组，依次执行
import {createStore,applyMiddleware} from 'redux'

//thunk是一个中间件,因为redux store仅支持同步数据流,使用thunk中间件可以请求异步数据流
import thunk from 'redux-thunk'
//这个与谷歌浏览器上的第三方组件redux来进行配合的
import {composeWithDevTools} from 'redux-devtools-extension'
//引入reducer函数，之后会创建
import reducers from './reducers'


//向外暴露store对象
export default createStore(reducers,composeWithDevTools(applyMiddleware(thunk)))

3、创建功能组件Todolist.js（在创建中我们要想好，我们将来需要啥state,以及action）

import React, { Component } from 'react'
//connect方法，是将srore和该组件联系到一起的
import { connect } from 'react-redux'

class Todolist extends Component {
    render() {
        return (
            <div>
                <input/>
                <button>增加</button>
                <ul>
                	<li></li>
                </ul>
            </div>
        )
    }
}


export default connect()(Todolist)

4、创建reducers.js文件，将之前我们想到的state属性加入其中

//创建的默认值
const defaultState = {
    inputValue:'我大物',
    list:['wwed']
}

//Reducer里只能接收state，不能改变state
//state是指原始仓库里的状态，action是新传递的状态
function reducer(state=defaultState,action) {
    switch (action.type){
        default:
            return state
    }

}

export default reducer

5、对Todolist.js组件进行更改,将store中默认的state引入到组件中

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Todolist extends Component {

    

    render() {
	
        let {inputValue,list} = this.props

        return (
            <div>
                <input 
                    value={inputValue}
                />
                <button>增加</button>
                <ul>
                    {
                        list.map((item,index) => {
                            return(
                                <li key={index}>{item}</li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

const mapState = (state) => {
    return {
        inputValue:state.inputValue,
        list:state.list
    }
}

export default connect(mapState)(Todolist)

6、创建文件夹actions.js，用于创建多个action

//改变input框里的值
export const inputChange = (e) => ({type:'',value:e})
//减少li
export const addItem = () => ({type:''})
//增加li
export const deleteItem = (e) => ({type:'',value:e})

7、创建文件夹action-types.js,用于规定action中的type值

export const CHANGE_INPUT = 'change_input'
export const ADD_ITEM = 'add_item'
export const DELETE_ITEM = 'delete_item'

8、将文件action-types.js,引入actions.js文件中

import {
    CHANGE_INPUT,
    ADD_ITEM,
    DELETE_ITEM
} from './action-types'


//改变input框里的值
export const inputChange = (e) => ({type:CHANGE_INPUT,value:e})
//增加li
export const addItem = () => ({type:ADD_ITEM})
//减少li
export const deleteItem = (e) => ({type:DELETE_ITEM,value:e})

9、将action引入到TodoList组件中去，然后可以传参

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
    inputChange,
    addItem,
    deleteItem
} from './redux/actions'

class Todolist extends Component {

    

    render() {

        let {inputValue,list} = this.props

        return (
            <div>
                <input 
                    value={inputValue}
                    onChange={e => this.props.inputChange(e.target.value)}
                />
                <button onClick={() => this.props.addItem()}>增加</button>
                <ul>
                    {
                        list.map((item,index) => {
                            return(
                                <li key={index} onClick={() => this.props.deleteItem(index)}>{item}</li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

const mapState = (state) => {
    return {
        inputValue:state.inputValue,
        list:state.list
    }
}

export default connect(mapState,{inputChange,addItem,deleteItem})(Todolist)

10、开始编写reducer函数，引入action-types.js

import {
    CHANGE_INPUT,
    ADD_ITEM,
    DELETE_ITEM
} from './action-types'

const defaultState = {
    inputValue:'qw',
    list:[]
}

function reducer(state=defaultState,action) {
    switch (action.type){

        case CHANGE_INPUT: {
            let newState = JSON.parse(JSON.stringify(state))
            newState.inputValue = action.value
            return newState

        }
        case ADD_ITEM: {
            let newState = JSON.parse(JSON.stringify(state))
            newState.list.push(newState.inputValue)
            return newState
        }
        case DELETE_ITEM: {
            let newState = JSON.parse(JSON.stringify(state))
            newState.list.splice(action.value,1)
            return newState
        }
        default:
            return state
    }

}

export default reducer

11、再次修改Todolist组件

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
    inputChange,
    addItem,
    deleteItem
} from './redux/actions'

class Todolist extends Component {

    
    render() {

        let {inputValue,list} = this.props

        return (
            <div>
                <input 
                    value={inputValue}
                    onChange={e => this.props.inputChange(e.target.value)}
                />
                <button onClick={() => this.props.addItem()}>增加</button>
                <ul>
                    {
                        list.map((item,index) => {
                            return(
                                <li key={index} onClick={() => this.props.deleteItem(index)}>{item}</li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

const mapState = (state) => {
    return {
        inputValue:state.inputValue,
        list:state.list
    }
}

export default connect(mapState,{inputChange,addItem,deleteItem})(Todolist)