I have the following structure:
{
todos: {
byId: {
123456: {
id: 123456,
text: "Hello World",
dateTime: "2019-01-21T06:15:53.300Z"
},
...
},
allIds: [123456, ...]
}
}
Then I use slice reducer as described here.
const byId = createReducer({})({
[ADD]: (state, { payload }) => ({
...state, [payload.id]: payload
})
})
const allIds = createReducer([])({
[ADD]: (state, { payload }) => [
...state, payload.id
]
})
export default combineReducers({ byId, allIds })
How would you handle ordering by date here? Because allIds reducer only gets the state (the array) and the new added object with its date.
The website linked above just says "Arrays of IDs should be used to indicate ordering.".
I can make a new entry in the state named orderedTodoIds for example but then the sentence above is not correct.
Related
I build an applicant with Redux RTK with createEntity
Two issue that I couldn't found it on the docs
CreateEntity is only return {ids: [], entities: []}? Is possible that return eg: totalPage from the response also?
Cache page only work on the hardcode initialState in createSlice if the pageQuery is same.
First question:
Getting the response from server was
{
users: [{id: 1}, ...]
totalPage: 100
}
I'd like to send totalPage to auto generated hook also.
export const usersAdapter = createEntityAdapter({})
export const initialState = usersAdapter.getInitialState()
export const usersApiSlice = apiSlice.injectEndpoints({
endpoints: (builder) => ({
getUsers: builder.query({
query: (args) => {
return {
url: '/api/users',
method: 'GET',
params: { page: 1, limit: 10 }
}
},
validateStatus: (response, result) => {
return response.status === 200 && !result.isError
},
transformResponse: (responseData) => {
const loadedUsers = responseData?.users.map((user) => user)
console.log("responseData: ", responseData) // <----- return { users: [], totalPage: 100 }. Could we set this totalPage value into Adapter?
return usersAdapter.setAll(initialState, loadedUsers)
},
providesTags: (result, error, arg) => {
if (result?.ids) {
return [
{ type: "User", id: "LIST" },
...result.ids.map((id) => ({ type: "User", id })),
]
} else return [{ type: "User", id: "LIST" }]
},
})
})
})
Use the hook in component
const { data } = useGetUsersQuery("page=1&limit=10");
console.log(data) // { ids: [], entity: [{}, {}] };
// expected return { ids: [], entity: [{}, {}], totalPage: 100}
Second question:
Store the page query in createSlice. The edit page will be remain same after refresh if the page query value same as initialState value.
import { createSlice } from "#reduxjs/toolkit"
const userReducer = createSlice({
name: "user",
initialState: {
query: `page=1&limit=10`,
},
reducers: {
setUserPageQuery: (state, action) => {
const query = action.payload
state.query = query
},
},
})
Page url Flow:
localhost:3000/users > localhost:3000/users/4 > refresh -> data will remain after refresh browser. (query "page=1&limit10" same as createSlice initialState value )
localhost:3000/users > localhost:3000/users/15 > refresh -> data state will gone after refresh browser. (query "page=2&limit10" different from createSlice initialState value )
Appreciate all the reply :)
I need some help with modifying my reducer. I'm using Redux Toolkit and in one of the state slices I've got an object with some grouped settings:
initialState: {
...
userSettings: {mode: 2, subscription: false, setting3: 'text', setting4: 'another text'},
...
}
a reducer I have is:
setUserSettings: (state, action) => {
state.userSettings: action.payload
}
In different parts of a component, I'd update individual settings from the userSettings object:
dispatch(setUserSettings({ mode: 4 }))
in another place:
dispatch(setUserSettings({ setting3: 'some other text'})
How would I modify the reducer to be able to do it? Thanks
Since RTK use immer library underly, you can mutate the state by assigning directly. See Mutating and Returning State
import { configureStore, createSlice } from '#reduxjs/toolkit';
const settingsSlice = createSlice({
name: 'settings',
initialState: {
otherSettings: { ok: true },
userSettings: { mode: 2, subscription: false, setting3: 'text', setting4: 'another text' },
},
reducers: {
setUserSettings: (state, action) => {
state.userSettings = { ...state.userSettings, ...action.payload };
},
},
});
const { setUserSettings } = settingsSlice.actions;
const store = configureStore({ reducer: settingsSlice.reducer });
store.subscribe(() => {
console.log(store.getState());
});
store.dispatch(setUserSettings({ mode: 4 }));
store.dispatch(setUserSettings({ setting3: 'some other text' }));
Output:
{
otherSettings: { ok: true },
userSettings: {
mode: 4,
subscription: false,
setting3: 'text',
setting4: 'another text'
}
}
{
otherSettings: { ok: true },
userSettings: {
mode: 4,
subscription: false,
setting3: 'some other text',
setting4: 'another text'
}
}
change your reducer to
setUserSettings: (state, action) => {state.userSettings={...state.userSettings,action.payload}}
what we did here is making a copy of the old state and then combine it with the new value you need to change
the new key of the object will override the old one
I am following the docs to upsertMany into my redux createSlice.
I am following this part of the docs.
I keep getting this error in my upsertMany call. Why is this?
Unhandled Rejection (TypeError): Cannot use 'in' operator to search for '525' in undefined
I have noticed that normalizr returns both entities and result objects, however, RTK only uses entities. Where do we use the result if we need to at all?
Here is my createSlice
const posts = new schema.Entity('actionPosts', {}, { idAttribute: 'id' })
export const fetchPosts = createAsyncThunk(
'actionPosts/fetchPosts',
async (email) => {
const { data } = await getUserActionPostsByUser({ email })
const extractedPosts = data.userActionPostsByUser
const normalizedData = normalize(extractedPosts, [posts])
return normalizedData.entities
}
)
const adapter = createEntityAdapter({
sortComparer: (a, b) => b.createdAt.localeCompare(a.createdAt),
loading: '',
error: '',
})
const initialState = adapter.getInitialState()
const slice = createSlice({
name: 'actionPosts',
initialState,
extraReducers: {
[fetchPosts.fulfilled]: (state, { payload }) => {
console.log('payload', payload.actionPosts)
adapter.upsertMany(state, payload.actionPosts) // error happens here
},
},
})
export default slice.reducer
Here is the normalized object
{
actionPosts: {
525: {
id: 525
email: "test#test.com"
content: "lorem ipsum"
createdAt: "2020-09-24T20:29:44.848Z"
}
}
result[
525,
]
}
In the docs for testing incrementing todo ids, this assumes a predictable response.
In an example such as below, a unique id is generated.
How could this be tested?
This test passes, but I'm not sure if it's correct, shouldn't the id be defined based on what's in the prepare callback?
slice.js
add: {
reducer: (state, {payload}: PayloadAction<{id: string, item: Item}>) => {
state[payload.id] = payload.item
},
prepare: (item: Item) => ({
payload: {id: cuid(), item}
})
}
slice.test.js
it('should handle add', () => {
expect(
reducer(
{},
{
type: actions.add,
payload: {
id: 'id-here?',
item: {
other: 'properties...'
}
},
}
)
).toEqual({
'id-here?': {
other: 'properties...'
},
})
})
You can pull out the prepare function and also the reducer function into it's own constant and then test prepare in isolation:
todosSlice.js:
[...]
let nextTodoId = 0;
export const addTodoPrepare = (text) => {
return {
payload: {
text,
id: nextTodoId++
}
}
}
export const addTodoReducer = (state,
action) => {
const {id, text} = action.payload;
state.push({
id,
text,
completed: false
});
};
const todosSlice = createSlice({
name: 'todos',
initialState: [],
reducers: {
addTodo: {
prepare: addTodoPrepare,
reducer: addTodoReducer,
},
}
})
[...]
todosSlice.spec.js:
import todos, {addTodo, addTodoPrepare} from './todosSlice'
describe('addTodoPrepare',
() => {
it('should generate incrementing IDs',
() => {
const action1 = addTodoPrepare('a');
const action2 = addTodoPrepare('b');
expect(action1.payload).toEqual({
id: 0,
text: 'a'
})
expect(action2.payload).toEqual({
id: 1,
text: 'b'
})
})
})
describe('todos reducer',
() => {
[...]
})
For unit testing, NO, just test each reducer independently.
For integration testing and e2e testing, Yes.
Maybe I'm missing something completely obvious but this has been tripping me up today.
Let's say we have a Redux store with a structure like so:
const state = {
...
pages: {
...
accountPage: {
currentTab: 'dashboard',
fetching: false,
tableSettings: {
sortDir: 'asc',
sortField: 'name'
}
}
}
}
So there is obviously a main reducer...
export default combineReducers({
...
pages: pagesReducer
...
});
Then the reducer for pages has the reducer for each page...
export default combineReducers({
...
accountPage: accountPageReducer
...
});
And now finally we get down to the meat of the problem, the reducer for this particular piece of state.
export default handleActions({
[setCurrentTab]: (state, action) => { ... },
[setIsFetching]: (state, action) => { ... }
});
That's all good right? Well, the key in the state given at the outset at tableSettings should actually be handled by it's own reducer. This pattern may exist many times in the state, so it is abstracted away to a reducer-creating function:
const defaultState = {
sortDir: 'asc',
sortField: null
};
export const createTableSettingReducer (actions, extra ={}) => {
return handleActions({
[actions.changeSortDir]: (state, action) => ({ ...state, sortDir: action.payload }),
[actions.changeSortField]: (state, action) => ({ ...state, sortField: action.payload }),
...extra
}, defaultState)
}
So, above the reducer for the sections of state (accountPageReducer), we created the reducer:
// pretend these actions were imported
const tableSettingsReducer = createTableSettingReducer({
changeSortDir: setSortDir,
changeSortField: setSortField
});
So the question is, where do I put tableSettingsReducer?
This of course, doesn't work:
export default handleActions({
[setCurrentTab]: (state, action) => { ... },
[setIsFetching]: (state, action) => { ... },
tableSettings: tableSettingsReducer
});
It doesn't work because handleActions expects to use the action constants as keys, not the actual key in the state.
There is also nowhere to use combineReducers, since there is only one nested reducer of this slice of state. currentTab and fetching do not need their own reducer, so it's fruitless to use combineReducers.
I know that recently redux-actions started support nested reducers...but there isn't really any documentation available showing exactly how it's supposed to be done, or even describing the parameters needed to make it happen.
I could possibly use combineActions, and combine all of the actions in handleActions for every action that can be taken by a nested reducer. But that doesn't seem very clean...plus, what if the nested reducer has it's own nested reducers? That means every time those reducers can process a new action, that action needs to be added to combineActions in all its parents. Not the best.
Thoughts?
Every key in your state gets its own reducer. Some reducers are really simple, some are themselves composed of other reducers. All the sister keys at each level of your state tree can be combined with combineReducers.
const initialCurrentTab = 'dashboard';
const currentTabReducer = handleActions({
[setCurrentTab]: (state, action) => {
return action.payload;
},
}, initialCurrentTab);
const defaultFetchingState = false;
const fetchingReducer = handleActions({
[setIsFetching]: (state, action) => {
return action.payload;
},
}, defaultFetchingState);
export default combineReducers({
currentTab: currentTabReducer,
fetching: fetchingReducer,
tableSettings: tableSettingsReducer,
});
let say you have the initialState = { data : []}
let assume that the upcoming action has payload of an array
export the reducer as the following :
return handleActions({
["Action Type 1" ]: (state, { payload }) => {
return { ...state, data: [...state.data, ...payload ]} ;
},
["Action Type 1" ]: (state, { payload }) => {
return { ...state, data: [...state.data, ...payload ]} ;
},
}, initialSate );
import this reducer in your combine reducer .