react-redux

一、store文件下

actionType.js文件，定义acition类型的常量

export const CHANGE_INPUT_VALUE = 'change_input_value'
export const ADD_ITEM = 'add_item'
export const DEL_ITEM = 'del_item'

2、reducer.js文件，根据不同的action类型，返回新的state

import { CHANGE_INPUT_VALUE, ADD_ITEM, DEL_ITEM } from './actionType'
const defaultState = {
    inputValue: '',
    list: []
}
export default (state = defaultState, action) => {
    if (action.type === CHANGE_INPUT_VALUE) {
        const newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    if (action.type === ADD_ITEM) {
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if (action.type === DEL_ITEM) {
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index, 1)
        return newState
    }
    return state
}

3、index.js文件

import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store

4、actionCreator.js文件

import { CHANGE_INPUT_VALUE, ADD_ITEM, DEL_ITEM } from './actionType'
export const changeInputValue = (value) => ({
    type: CHANGE_INPUT_VALUE,
    value
})
export const addItem = () => ({
    type: ADD_ITEM
})

export const delIem = (index) => ({
    type: DEL_ITEM,
    index
})

二、src下index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux'
import store from './store'
// Provider 连接到store,从而它内部的组件都有能力获取到store
const App = (
    <Provider store={store}>
        <TodoList />
    </Provider>
)
ReactDOM.render(App, document.getElementById('root'))

三、src下组件

import React from 'react'
import { connect } from 'react-redux'
import { changeInputValue, addItem, delIem } from './store/actionCreator'
const TodoList = (props) => {
    const { inputValue, list, changeInputVal, addList, handleDel } = props
    return (
        <div>
            <div>
                <input value={inputValue} onChange={changeInputVal}></input>
                <button onClick={addList}>提交</button>
            </div>
            <ul>
                {
                    list.map((item, index) => {
                        return (
                            <li key={index} onClick={handleDel.bind(this, index)}>{item}</li>
                        )
                    })
                }
            </ul>
        </div>
    )
}
// 把store中的state映射到该组件中的props中
const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}
// 将store的dispatc方法挂载到props上
const mapDispatchToProps = (dispatch) => {
    return {
        changeInputVal(e) {
            const action = changeInputValue(e.target.value)
            dispatch(action)
        },
        addList() {
            const action = addItem()
            dispatch(action)
        },
        handleDel(index) {
            const action = delIem(index)
            dispatch(action)
        }
    }
}
// 将store与TodoList做连接
// 把store中的state映射到该组件中的props中
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)