从另一个减速器中访问减速器状态

IT技术 reactjs redux react-redux reducers
2021-05-01 04:26:21

我有一个减速器，当一个动作被调度时，我正在重新调整适当的状态。现在我定期调用一个 API，所以结果会一次又一次地触发一个动作。所以我想要的是，如果reducer 状态已经有数据，那么另一个reducer 在发送调用时不会将状态显示为正在加载。只有第一次接收数据时，它必须保持其加载状态。我希望我能够正确地解释它

这是我的代码片段

加载状态减速器

const loading = (state = false, action) => {

    switch (action.type) {
    case 'GET_AUDIT_DATA':         // here I want to return true only when there is no data available
        return true
    case 'GET_AUDIT_DATA_RECEIVED':  
        return false
    case 'GET_AUDIT_DATA_ERROR':
        return false
    default:
        return state
    }
}

组合减速机

const allReducers = combineReducers({
    auditData: AuditData,
    auditLoading: AuditLoading,
    modifiedOrders: ModifiedOrders
});

export default allReducers;

Reducer 返回有关超级代理触发的操作的数据

const auditData = (state = [], action) => {
    switch(action.type) {
        case 'GET_AUDIT_DATA_RECEIVED': 
        console.log(action.data);
            return action.data;
        case 'GET_AUDIT_DATA_ERROR': 
            return action.err;
        default :
            return state;
    }
}
export default auditData;

所以最初auditData不包含任何数据，只有在第一次成功调用后才返回数据。当它同时loading state reducer被调用时，它应该GET_AUDIT_DATA只在审计数据reducer不包含任何数据时才返回true 。

也只是从auditData正确的方式返回当前获得的数据，或者我应该以不同的方式做。基本上我想overwrite的current data与new one。

4个回答

您可以调用getState()商店以获取减速器列表和减速器内的当前状态。

  1. 导入store到auditLoading（使用商店获取值。不要改变商店）
  2. store.getState().auditLoading会给你auditLoading减速机的状态。

这种方法类似于 提供的回调redux-thunk。(dispatch, getState) => {}将在其中返回操作。

最好的方法是向Loading 状态的 reducer发送一个信息，以了解其他 reducer 是否已经有数据。最后要有：

const loading = (state = false, action) => {

    switch (action.type) {
    case 'GET_AUDIT_DATA':
        if(!action.dataAlreadyInitialized){
            return true
        }
    case 'GET_AUDIT_DATA_RECEIVED':  
        return false
    case 'GET_AUDIT_DATA_ERROR':
        return false
    default:
        return state
    }
}

您应该可以从您的操作功能访问应用程序状态并执行以下操作：

dispatch({
  type:'GET_AUDIT_DATA',
  dataAlreadyInitialized: appState.auditData.length > 0
});

接受的答案很好（通过动作传递数据长度），但如果它是一条被广泛使用的信息，则可能会变得费力。还有另一种解决方案有时更适合每个操作可能使用的“当前用户”之类的内容。

根据 Redux FAQ https://redux.js.org/faq/reducers，向 reducer 函数添加第三个参数是完全可以接受的。IE：

加载状态减速器

const loading = (state = false, action, noData) => {

    switch (action.type) {
    case 'GET_AUDIT_DATA':
        return noData
    case 'GET_AUDIT_DATA_RECEIVED':  
        return false
    case 'GET_AUDIT_DATA_ERROR':
        return false
    default:
        return state
    }
}

组合减速机

不幸的是，这意味着我们必须编写代码来组合减速器，而不是使用 combineReducers 快捷方式。但这并不太难，您只需调用每个减速器并在发生任何更改时创建一个新对象：

const allReducers = (state = null, action) => {
    const auditData = AuditData(state?.auditData, action);
    const auditLoading = AuditLoading(state?.auditLoading, action, !state?.auditData?.length);
    const modifiedOrders = ModifiedOrders(state?.modifiedOrders, action);
    return (auditData !== state?.auditData ||
      auditLoading !== state?.auditLoading ||
      modifiedOrders !== state?.modifiedOrders) ?
      { auditData, auditLoading, modifiedOrders } : state;
});

export default allReducers;

注意传递给 AuditLoading 减速器的第三个参数。其他减速器或调用操作的代码不需要更改。哪个好！

import store from '../../../redux/store'

console.log(store.getState().loginReducer.accessToken)

通过这个语句，我们将获得 accessToken 的状态

其它你可能感兴趣的问题
上一篇Monoprice Select Mini 上的“神奇数字”是什么？ 下一篇我真的可以在堆肥上扔失败的 PLA 印刷品吗？