correct way to define more than one action with access to the same state

[efiorello]

What is the correct way to write actions that impact the same store? for example an action that fetch data from the server, and another action that allows you to edit that data?

like redux-toolkit `import { createAction, createReducer } from '@reduxjs/toolkit'

const increment = createAction('counter/increment') const decrement = createAction('counter/decrement')

const counterReducer = createReducer(0, (builder) => { builder.addCase(increment, (state, action) => state + action.payload) builder.addCase(decrement, (state, action) => state - action.payload) })`

redux-toolkit-wrapper actions cannot seen the same state to get the old version `import { buildSlice } from '@thecodingmachine/redux-toolkit-wrapper' import Increment from './Increment' import Decrement from './Decrement'

// This state is common to all the "user" module, and can be modified by any "user" reducers const sliceInitialState = { }

export default buildSlice('organizations', [Increment, Decrement], sliceInitialState).reducer `

[JeremyDolle]

Hi @efiorello, sorry for the delay I missed your issue !

I think you can do something like this :

Store/User/FetchOne.js

import {
  buildAsyncState,
  buildAsyncReducers,
  buildAsyncActions,
} from '@thecodingmachine/redux-toolkit-wrapper'
import fetchOneUserService from '@/Services/User/FetchOne'

export default {
  initialState: buildAsyncState('fetchOne'),
  action: buildAsyncActions('user/fetchOne', fetchOneUserService),
  reducers: buildAsyncReducers({
    errorKey: 'fetchOne.error', 
    loadingKey: 'fetchOne.loading',
  }),
}

Store/User/UpdateOne.js

import {
  buildAsyncState,
  buildAsyncReducers,
  buildAsyncActions,
} from '@thecodingmachine/redux-toolkit-wrapper'
import fetchOneUserService from '@/Services/User/FetchOne'

export default {
  initialState: buildAsyncState('updateOne'),
  action: buildAsyncActions('user/updateOne', updateOneUserService),
  reducers: buildAsyncReducers({
    errorKey: 'updateOne.error', 
    loadingKey: 'updateOne.loading',
  }),
}

Store/User/index.js

import { buildSlice } from '@thecodingmachine/redux-toolkit-wrapper'
import FetchOne from './FetchOne'
import UpdateOne from './UpdateOne'

// This state is common to all the "user" module, and can be modified by any "user" reducers
const sliceInitialState = {
  item: {},
}

export default buildSlice('user', [FetchOne, UpdateOne], sliceInitialState).reducer

So here the actions user/FetchOne and user/updateOne will modified state.user.item

[TeyimPila]

Hi @efiorello, sorry for the delay I missed your issue !

I think you can do something like this :

Store/User/FetchOne.js

import {
  buildAsyncState,
  buildAsyncReducers,
  buildAsyncActions,
} from '@thecodingmachine/redux-toolkit-wrapper'
import fetchOneUserService from '@/Services/User/FetchOne'

export default {
  initialState: buildAsyncState('fetchOne'),
  action: buildAsyncActions('user/fetchOne', fetchOneUserService),
  reducers: buildAsyncReducers({
    errorKey: 'fetchOne.error', 
    loadingKey: 'fetchOne.loading',
  }),
}

Store/User/UpdateOne.js

import {
  buildAsyncState,
  buildAsyncReducers,
  buildAsyncActions,
} from '@thecodingmachine/redux-toolkit-wrapper'
import fetchOneUserService from '@/Services/User/FetchOne'

export default {
  initialState: buildAsyncState('updateOne'),
  action: buildAsyncActions('user/updateOne', updateOneUserService),
  reducers: buildAsyncReducers({
    errorKey: 'updateOne.error', 
    loadingKey: 'updateOne.loading',
  }),
}

Store/User/index.js

import { buildSlice } from '@thecodingmachine/redux-toolkit-wrapper'
import FetchOne from './FetchOne'
import UpdateOne from './UpdateOne'

// This state is common to all the "user" module, and can be modified by any "user" reducers
const sliceInitialState = {
  item: {},
}

export default buildSlice('user', [FetchOne, UpdateOne], sliceInitialState).reducer

So here the actions user/FetchOne and user/updateOne will modified state.user.item

Hey @JeremyDolle this approach is exactly what I am facing issues with. I have multiple actions (module) that update a central state (item) but since their results are different, the store is being overwritten. How do I group the results of action of these actions? e.g

const sliceInitialState = {
  FetchOne: {},
  updateOne: {}
}

So that I can process the results independently

In summary, each module overrides state instead of increment it and I want to avoid this

[arunim2405]

Any updates on this? @TeyimPila @JeremyDolle