使用react-redux打造一个TodoList应用

首先需要安装redux，react-redux，npm i react-redux redux --save

index.js，导入 Provider，将创建好的 store 绑定到 Provider 中

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import TodoList from './TodoList'
import store from './react-redux/store/index'

const App = (
    <Provider store={store}>
        <TodoList/>
    </Provider>
)

ReactDOM.render(App, document.getElementById('root'))

store/index.js，创建一个 createStore，将 reducer 引入进来

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

const store = createStore(reducer)

export default store

reducer.js，处理 action 中 dispatch 分发的 type

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 === 'delete_item') {
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index, 1)
        return newState
    }
    return state
}

TodoList.js，使用connect方法进行连接，将TodoList 这个 UI 组件打造成容器组件

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

class TodoList extends React.Component {
    render() {
        const {inputValue, handleInputChange, handleClick, 
        handleDeleteItem, list} = this.props
        return (
            <Fragment>
                <div>
                    <input value={inputValue} onChange={handleInputChange}/>
                    <button onClick={handleClick}>提交</button>
                </div>
                <ul>
                    {
                        list.map((item, index) => {
                            return <li key={item} onClick={() => 
                            handleDeleteItem(index)}>{item}</li>
                        })
                    }
                </ul>
            </Fragment>
        )
    }
}

// 将 store 中的数据映射到 props 中，就可以在props中接受到 store 传递过来的数据了
const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}

// 将 mapDispatchToProps 下的方法映射到 props 中
const mapDispatchToProps = (dispatch) => {
    return {
        handleInputChange(event) {
            const action = {
                type: 'change_input_value',
                value: event.target.value
            }
            dispatch(action)
        },
        handleClick() {
            const action = {
                type: 'add_item'
            }
            dispatch(action)
        },
        handleDeleteItem(index) {
            const action = {
                type: 'delete_item',
                index
            }
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

最后可以把这个组件换成无状态组件

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

const TodoList = (props) => {
    const {inputValue, handleInputChange, handleClick, 
    handleDeleteItem, list} = props
    return (
        <Fragment>
            <div>
                <input value={inputValue} onChange={handleInputChange}/>
                <button onClick={handleClick}>提交</button>
            </div>
            <ul>
                {
                    list.map((item, index) => {
                        return <li key={item} onClick={() => 
                        handleDeleteItem(index)}>{item}</li>
                    })
                }
            </ul>
        </Fragment>
    )
}

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

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputChange(event) {
            const action = {
                type: 'change_input_value',
                value: event.target.value
            }
            dispatch(action)
        },
        handleClick() {
            const action = {
                type: 'add_item'
            }
            dispatch(action)
        },
        handleDeleteItem(index) {
            const action = {
                type: 'delete_item',
                index
            }
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)