redux 在一个事件处理程序中有许多分派是个好主意吗？

你能解释一下在一个单击处理程序中对不同的操作放置许多分派是否是一个好主意吗？每个分派都有函数，该函数从JSON文件中获取数据，并根据参数中的值输出过滤后的数组。

const handleBtnClick = () => {
        dispatch({
            type: ACTIONS_CITY.CONVERT_CITY_NAME,
            payload: convertCityNameToCoordinates(value) //finds a city name and returns coordinates of the city
        })                                               

        dispatch({
            type: ACTIONS_CITY.CHANGE_REGION,
            payload: getRegion(value) //finds a city name and return its region
        })

        dispatch({
            type: ACTIONS_CITY.CHANGE_POPULATION,
            payload: getPopulation(value) //return a population of provided city
        })
}

字符串

减速器 *

export const cityReducer = (state, action) => {
    switch (action.type) {
        case (ACTIONS_CITY.CONVERT_CITY_NAME): {
            return {
                ...state,
                [state.cityCoordinates]: action.payload
            }
        }
        case (ACTIONS_CITY.CHANGE_POPULATION): {
            return {
                ...state,
                [state.population]: action.payload
            }

        }
        case (ACTIONS_CITY.CHANGE_REGION): {
            return {
                ...state,
                [state.region]: action.payload
            }
        }
        default:
            return state
    }
}

型

最佳实践之一是：
避免按顺序调度多个操作

**避免在一行中调度许多操作来完成更大的概念“事务”。**这是法律的的，但通常会导致多次相对昂贵的UI更新，并且某些中间状态可能会被应用程序逻辑的其他部分无效。更倾向于分派一个单一的“事件”类型的动作，它会立即导致所有适当的状态更新，或者考虑使用动作批处理插件来分派多个动作，最后只进行一次UI更新。

原因1.多个状态更新导致多个渲染。
如果你使用的是React <18版本，并在setTimeout()，promise.then(resolveCallback)中顺序调度许多操作，你应该使用react-redux中的batch() API，它使用React.unstable_batchedUpdates() API来允许事件循环中的任何React更新被批量处理到单个渲染通道中。
由于handleBtnClick看起来像一个事件处理程序，因此您不需要使用batch() API。React已经在内部将其用于自己的事件处理程序回调。
原因2.中间状态
此外，在概念上属于更大的“事务”样式更新序列一部分的多个分派将导致可能被视为无效的中间状态
如果我们可以更新一次状态，为什么要更新三次？
改进的方法是使用所有三个有效负载分派单个操作

import React from 'react';

const ACTIONS_CITY = {
    CONVERT_CITY_NAME: 'CONVERT_CITY_NAME',
    CHANGE_POPULATION: 'CHANGE_POPULATION',
    CHANGE_REGION: 'CHANGE_REGION',
    CHANGE_CITY: 'CHANGE_CITY',
};

const cityReducer = (state, action) => {
    switch (action.type) {
        case ACTIONS_CITY.CHANGE_CITY: {
            return {
                ...state,
                ...action.payload,
            };
        }
        case ACTIONS_CITY.CONVERT_CITY_NAME: {
            return {
                ...state,
                [state.cityCoordinates]: action.payload,
            };
        }
        case ACTIONS_CITY.CHANGE_POPULATION: {
            return {
                ...state,
                [state.population]: action.payload,
            };
        }
        case ACTIONS_CITY.CHANGE_REGION: {
            return {
                ...state,
                [state.region]: action.payload,
            };
        }
        default:
            return state;
    }
};

export default function App() {
    const [city, dispatch] = React.useReducer(cityReducer, { cityCoordinates: '100', population: 10000, region: 'japan' });
    console.log(city);
    const handleBtnClick = () => {
        dispatch({
            type: ACTIONS_CITY.CHANGE_CITY,
            payload: {
                cityCoordinates: '120',
                population: 20000,
                region: 'U.S',
            },
        });
    };

    return (
        <div className="App">
            <button onClick={handleBtnClick}>click me</button>
        </div>
    );
}

字符串
codesandbox的
进一步阅读：我是否应该从一个动作创建者在一行中分派多个动作？

redux 在一个事件处理程序中有许多分派是个好主意吗？

1条答案

相关问题

热门标签

最新问答