redux 三部曲

store / index

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

store/reducer

const defaluteStatus: any = {
    inputValue: 'woshi inputValue',
    list: [
        'woshixiaogou',
        '你是小猪'
    ]
}

export default (status = defaluteStatus, action: any) => {
    if (action.type === 'changeInput') {
        let newStatus = JSON.parse(JSON.stringify(status))
        newStatus.inputValue = action.value
        return newStatus
    }

    if (action.type === 'changeItem') {
        let newStatus = JSON.parse(JSON.stringify(status))
        newStatus.list = [...newStatus.list, action.value]
        return newStatus
    }

    if (action.type === 'deleteItem') {
        let newStatus = JSON.parse(JSON.stringify(status))
        newStatus.list.splice(action.value, 1)
        return newStatus
    }

    return status

}

组件

import React, { useState } from 'react'
import { Input, Button } from 'antd'
import store from '../../store'

const Redux = () => {
    console.log(store.getState())
    const { inputValue, list } = store.getState()
    const [value, setInputValue] = useState(inputValue)
    const [listValue, setListValue] = useState(list)

    const changeValue = (e: string) => {
        const action = {
            type: 'changeInput',
            value: e
        }
        store.dispatch(action)
        setInputValue(store.getState().inputValue)
    }

    const addListItem = () => {
        const action = {
            type: 'changeItem',
            value: value
        }
        const action2 = {
            type: 'changeInput',
            value: ''
        }
        store.dispatch(action)
        store.dispatch(action2)
        setListValue(store.getState().list)
        setInputValue(store.getState().inputValue)
    }

    const deleteItem = (index: number) => {
        const action = {
            type: 'deleteItem',
            value: index
        }
        store.dispatch(action)
        setListValue(store.getState().list)
    }

    return (<>
        <Input value={value} onChange={(e) => { changeValue(e.target.value) }}></Input>
        <Button onClick={() => { addListItem() }}>添加</Button>
        <ul>
            {
                listValue.map((item: any, index: number) => {
                    return <li
                        onClick={() => { deleteItem(index) }}
                        key={item + index}
                    >{item}</li>
                })
            }
        </ul>
    </>)
}

export default Redux

优化代码 提取actionType

store 文件夹建立actionTypes.ts

export const CHANGE_INPUT = 'changeInput'
export const CHANGE_ITEM = 'changeItem'
export const DELETE_ITEM = 'deleteItem'

store/reducer

import { CHANGE_INPUT, CHANGE_ITEM, DELETE_ITEM } from './actionTypes'


const defaluteStatus: any = {
    inputValue: 'woshi inputValue',
    list: [
        'woshixiaogou',
        '你是小猪'
    ]
}

export default (status = defaluteStatus, action: any) => {
    if (action.type === CHANGE_INPUT) {
        let newStatus = JSON.parse(JSON.stringify(status))
        newStatus.inputValue = action.value
        return newStatus
    }

    if (action.type === CHANGE_ITEM) {
        let newStatus = JSON.parse(JSON.stringify(status))
        newStatus.list = [...newStatus.list, action.value]
        return newStatus
    }

    if (action.type === DELETE_ITEM) {
        let newStatus = JSON.parse(JSON.stringify(status))
        newStatus.list.splice(action.value, 1)
        return newStatus
    }

    return status

}

组件

import React, { useState } from 'react'
import { Input, Button } from 'antd'
import store from '../../store'
import { CHANGE_INPUT , CHANGE_ITEM , DELETE_ITEM } from '../../store/actionTypes'

const Redux = () => {
    console.log(store.getState())
    const { inputValue, list } = store.getState()
    const [value, setInputValue] = useState(inputValue)
    const [listValue, setListValue] = useState(list)

    const changeValue = (e: string) => {
        const action = {
            type: CHANGE_INPUT,
            value: e
        }
        store.dispatch(action)
        setInputValue(store.getState().inputValue)
    }

    const addListItem = () => {
        const action = {
            type: CHANGE_ITEM,
            value: value
        }
        const action2 = {
            type: CHANGE_INPUT,
            value: ''
        }
        store.dispatch(action)
        store.dispatch(action2)
        setListValue(store.getState().list)
        setInputValue(store.getState().inputValue)
    }

    const deleteItem = (index: number) => {
        const action = {
            type: DELETE_ITEM,
            value: index
        }
        store.dispatch(action)
        setListValue(store.getState().list)
    }

    return (<>
        <Input value={value} onChange={(e) => { changeValue(e.target.value) }}></Input>
        <Button onClick={() => { addListItem() }}>添加</Button>
        <ul>
            {
                listValue.map((item: any, index: number) => {
                    return <li
                        onClick={() => { deleteItem(index) }}
                        key={item + index}
                    >{item}</li>
                })
            }
        </ul>
    </>)
}

export default Redux