React-useReducer简单使用

一、Fruit.js

import React, { useState } from 'react';

export function FruitList({ fruits, onSetFruits }) {
    const del = delIndex => {
        const tem = [...fruit];
        tem.splice(delIndex,1);
        onSetFruits(tem);
    };
    return (
        <div>
            <h2>水果列表</h2>
            <ul>
                {
                    fruits.map((item,index) => {
                        return (
                            <li key={index} onClick={() => del(index))>
                                {item}
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    )
}

export function FruitAdd(props) {
    const [name, setName] = useState('');
    return (
        <div>
            <h2>增加水果</h2>
            <input type='text' value={name} onChange={e => setName(e.target.value)}/>
            <button onClick=(() => props.onAdd(name))>增加</button>
        </div>
    )
}

二、FruitReducer.js

import React, { useReducer, useEffect } from 'react';
import { FruitList, FruitAdd } from './Fruit';

function fruitReducer(state, action){
    switch(action.type) {
        case 'init':
        case 'replace':
            return action.payload;
        case 'add':
            return [...state, action.payload];
        default:
            return state;
    }
} 

export default function HookReducer(){
    const [fruits, dispatch] = useReducer(fruitReducer,[]);
    useEffect(() =>{
        setTimeOut(() => {
            dispatch({
                type: 'init',
                payload: ['apple','banana']
            });
        }, 1000);
    }, []);

    return (
        <div>
            <h1>User</h1>
            <FruitAdd onAdd={(item) => {dispatch({type: 'add', payload: item})}}/>
            <FruitList fruits={fruits} onSetFruits={cur => dispatch({type: 'replace',payload: cur})}
        </div>
    )
}