I have this a reducer slice like this-
const financialSlice = createSlice({
name: 'financial',
initialState,
reducers: {
extraReducers: (builder) => {
//config
builder.addCase(fetchFinancialConfig.pending, (state, action) => {
state.data={};
state.loading = true
})
builder.addCase(fetchFinancialConfig.fulfilled, (state, action) => {
state.data={};
let respConfig = action?.payload;
state.config = respConfig;
state.currentTag=respConfig.currentTag;
state.currentPeriodType={value:respConfig.periodType};
state.currentSheet=respConfig.currentSheet;
let entityID = store.getState().currentTile.entityId;
setPermissions(entityID, respConfig, state);
});
builder.addCase(fetchFinancialConfig.rejected, (state, action) => {
state.data={};
state.config = {}
})
}
Now I have a component which calls this createAsyncThunk method and sets the state.config as follows-
useEffect(() => {
(async () => {
try {
dispatch(setMode(FINANCIALS));
await FinancialsServices.getConfig();
}
catch (err) {
console.log(err);
}
})()
}, []);
//useEffect responsible for fetching data as per grid mode
useEffect(() => {
const getData = async (addParams) => {
if ((financialState.config && Object.keys(financialState.config).length)) {
await FinancialsServices.getData(getPayload(addParams));
}
}
getData({})
}, [currentIndex, financialState.currentSheet.name,
financialState.currentTag,
financialState.currentPeriodType.value,
financialState.currentCurrency, financialState.financialsGridMode])
this getData() and getConfig() functions are actually
static async getConfig() {
try {
const configResponse = await store.dispatch(fetchFinancialConfig());
return configResponse.payload
} catch (error) {
console.log(error);
}
}
static async getData(payload) { // makes a dispatch request to fetch data for perticular ratio
try {
const dataResponse: any = await store.dispatch(fetchFinancialData({ payload }));
return dataResponse;
} catch (error) {
console.log(error);
}
}
Now in this fetchFinancialConfig.fulfilled
I want to make another API call thorugh setPermissions(entityID, respConfig, state);
this function and change state variable state.permission=true or false
and I want this to execute before getdata
useEffect and after fetching config through getConfig useEffect
How can I achieve it?
I tried calling this setPermission
function in static async getConfig() {
function, but it is being called after getData useEffect
it does not wait for setPermission
to finish executing
Is there any way to solve this problem?
***************************** UPDATE *****************************
I did something like-
builder.addCase(fetchFinancialConfig.fulfilled, (state, action) => {
state.data={};
let respConfig = action?.payload;
state.config = respConfig;
(async()=>{
await setPermissions('123', respConfig, state)
})();
and this seems to be working fine but now I want to access another slice to fetch entityId inside my slice.
Is there any way how we can do this?
I am encountering this error- when I tried store.getState()
You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.