redux 从另一个reducer中访问reducer状态

2ekbmq32  于 2023-08-05  发布在  其他
关注(0)|答案(5)|浏览(132)

我有一个reducer,当一个动作被分派时,我通过它返回适当的状态。现在我定期调用一个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操作中返回true。
另外,只返回当前从auditData获得的数据是正确的方法,还是应该采用不同的方法。基本上我想overwritecurrent datanew one

plicqrtu

plicqrtu1#

您可以通过存储调用getState()来获取reducer列表和reducer中的当前状态。
1.将store导入auditLoading(使用store获取值。不要改变存储)

  1. store.getState().auditLoading将给予auditLoading减速器的状态。
    这种方法类似于redux-thunk提供的回调。其中(dispatch, getState) => {}将返回到操作。
jxct1oxe

jxct1oxe2#

最好的方法是向Loading state 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
});

7nbnzgx9

7nbnzgx93#

接受的答案是好的(通过操作传递数据长度),但如果它是一条广泛使用的信息,则可能会很费力。还有另一种解决方案,有时更适合于每个操作都可能使用的“当前用户”之类的内容。
根据Redux FAQ https://redux.js.org/faq/reducers,向reducer函数添加第三个参数是完全可以接受的。即:

加载状态减速器

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
    }
}

字符串

组合减速器

不幸的是,这意味着我们必须编写代码来合并reducers,而不是使用combineReducers快捷方式。但这并不太难,你只需调用每个reducer并在发生变化时创建一个新对象:

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缩减器的第三个参数。不需要对其他reducer或调用该动作的代码进行更改。这很好!

35g0bw71

35g0bw714#

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

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

字符串
通过此语句,我们将获得accessToken的状态

4ngedf3f

4ngedf3f5#

您可以使用Thunk来解决此问题
让我们假设您的动作创建者看起来像这样

const getAuditDataAction  = (data) => {
    return { type: "GET_AUDIT_DATA", data }
}

字符串
如果您还没有Redux Thunk中间件,则需要添加它
你的动作创造者可以变成这样

const getAuditDataAction  = (data) => {
    return async (dispatch, getState) => {
        const { auditData, auditLoading, modifiedOrders } = getState();
        // Here depending on data you have in your store you 
        // can dispatch the default action or another action 
        // that does something else
        dispatch({ type: "GET_AUDIT_DATA", data })
     }
}

相关问题