时间戳

首页 > 解决方案 > react redux 中的调度类型使用

reactjs - react redux 中的调度类型使用

问题描述

在 redux 操作中，当我们想要设置一个值时，我们使用一个类型来调度，如下所示：

dispatch({
    type: SET_LOADER,
    payload: true
})

存储在type: SET_LOADER不同文件中的位置并将其导出，如下所示。

export const SET_LOADER = 'SET_LOADER'

在 reducer 中，我们将这样做：

function initialState() {
    return {
        formErr: {},
        isLoading: false
    }
}

export default function (state = initialState(), action) {
    const { type, payload } = action;
    switch (type) {
        case SET_LOADER:
            return {
                ...state,
                isLoading: payload
            }
        default:
            return state
    }
}

所以在我的应用程序中，我将这种SET_LOADER类型用于不同的操作和减速器。例如，在认证中，在配置文件更新中，当我要加载时，我会使用这种类型。所以我在各个地方都进口了这种类型。

我不确定是否可以将单一类型用于多用途，因为我现在注意到，当我进行调度时，更新的 redux 状态不属于目标减速器。状态更新发生在不同的减速器上。

但它是第一次调度。下一次更新，它正在更新不正确的 redux 状态。在我刷新页面并尝试再次更新后，它就可以工作了。

标签： reactjsreduxredux-thunkdispatch

解决方案

首先，您需要将减速器分成多个减速器，然后将它们组合在商店中，然后您可能可以通过在多种情况下使用相同的操作来逃脱，但它只是每个减速器的解决方案，这意味着让我们说您拥有并且 Auth reducer，这个 reducer 将拥有它isLoading，它可能会干扰该 reducer 中的其他操作，例如FetchAllProducts将使用isLoading但也FetchByIdProduct正在使用isLoading和相同的其他操作将触发加载状态。

让我们考虑这些使用相同初始状态的减速器

function initialState() {
    return {
        formErr: {},
        isLoading: false
    }
}

export const authReducer=(state = initialState(), action)=> {
    const { type, payload } = action;
    switch (type) {
        case SET_LOADER:
            return {
                ...state,
                isLoading: payload
            }
        default:
            return state
    }
}
export const productsReducer=(state = initialState(), action)=> {
    const { type, payload } = action;
    switch (type) {
        case SET_LOADER:
            return {
                ...state,
                isLoading: payload
            }
        default:
            return state
    }
}
export const cartReducer =(state = initialState(), action)=> {
    const { type, payload } = action;
    switch (type) {
        case SET_LOADER:
            return {
                ...state,
                isLoading: payload
            }
        default:
            return state
    }
}

//this is the store 
import {createStore,applyMiddleware,compose,combineReducers} from 'redux'
import thunk from 'redux-thunk'
import {productsReducer} from './reducers/ProductReducer'
import {cartReducer} from './reducers/CartReducer'
import {authReducer } from './reducers/AuthReducer'


const initialState={
    products: {
        formErr: {},
        isLoading: false
    },
    cart: {
        formErr: {},
        isLoading: false
    },
    auth: {
        formErr: {},
        isLoading: false
    }
}

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__  || compose 

const  store = createStore(combineReducers({
        products: productsReducer,
        cart    : cartReducer ,
        auth    : authReducer,
    }),
    initialState,
    composeEnhancer(applyMiddleware(thunk))
)
export default store

即使他们使用与您相同的初始状态，当您将组件连接到 redux 存储时，您也可以访问三个不同的isLoading ：

export default connect((state)=>({
    isLoading : state.products.isLoading,
    isLoading2: state.authReducer.isLoading,
    isLoading3: state.cart.isLoading,
}))(Products)

但老实说，我宁愿让我的行动更明确和具体案例，例如productsFetchIsLoading，这给你更多的控制和防止错误

推荐阅读