从另一个reducer中访问reducer状态

Shu*_*tri 8 reducers reactjs redux react-redux

我有一个减速器,我在调度动作时重新调整适当的状态.现在我定期调用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
    }
}
Run Code Online (Sandbox Code Playgroud)

结合减速器

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

export default allReducers;
Run Code Online (Sandbox Code Playgroud)

Reducer返回由superagent触发的动作数据

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;
Run Code Online (Sandbox Code Playgroud)

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

也正在auditData以正确的方式返回当前获得的数据,或者我应该采用不同的方式.基本上我想overwritecurrent datanew one.

Pra*_*avi 9

您可以getState()通过商店调用以获取Reducer列表以及reducers中的当前状态.

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

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

希望这可以帮助!

  • 在react 16和redux 4中,你不能这样做,你会得到=>错误:在reducer执行时,你可能不会调用store.getState()。减速器已经收到状态作为参数。从顶部减速器将其传递下来,而不是从存储中读取。 (6认同)

Dam*_*oux 7

最好的方法是向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
    }
}
Run Code Online (Sandbox Code Playgroud)

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

dispatch({
  type:'GET_AUDIT_DATA',
  dataAlreadyInitialized: appState.auditData.length > 0
});
Run Code Online (Sandbox Code Playgroud)


Phi*_*ber 7

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

根据 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
    }
}
Run Code Online (Sandbox Code Playgroud)

组合减速机

不幸的是,这意味着我们必须编写代码来组合reducer,而不是使用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;
Run Code Online (Sandbox Code Playgroud)

请注意传递给 AuditLoading 减速器的第三个参数。不需要对其他减速器或调用该操作的代码进行任何更改。这很好!


Apu*_*wal 5

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

console.log(store.getState().loginReducer.accessToken)
Run Code Online (Sandbox Code Playgroud)

通过这个语句我们会得到accessToken的状态