In my React project (Chat App), I am using redux toolkit, I want to use Map in place of object literal {} as state.
chatMap state contains contactId (mongodb _id) as key and chat array as value.
something like that -
chatMap =
{
[contactId1]: [chatsArr1],
[contactId2]: [chatsArr2]
}
(chatSlice.js)
const initialState = {
chatMap: new Map(),
...
}
reducers: {
setChatMap: (state, action) => {
state.chatMap = {...chatMap, key1: action.payload}
},
...
}
How to update chatMap (Map) state ?
This is what you're looking for:
reducers: {
setChatMap: (state, action) => {
state.chatMap = new Map([...chatMap, [key1, action.payload]])
},
...
}
You can do something like this.
reducers: {
setChatMap: (state, action) => {
state.chatMap = new Map(state.chatMap).set('key1', action.payload)
},
...
}
Firt you can convert the map to an object, then spread it. Again convert the final object to a map.
reducers: {
setChatMap: (state, action) => {
const obj = object.fromEntries(chatMap);
const tCM = {...obj, key1: action.payload};
state.chatMap = new Map(tCM);
},
...
}
Your problem relies on the fact that, React has now way of knowing if your object(Map) has changed or not, since its a bit more complicated than a primitive, you need to make what's called a deep-copy of that object.
By passing a new object, react will see a new reference and then trigger a new render.
Cheers 😉
I want to know what does ...state inside { ...state } do? Is it to change the value of the store to the initial value or to let the store be the latest value?
import * as actionType from "../actions/actionTypes";
const initialStore = {
roomsCount: 0,
resPerPage: 0,
rooms: [],
filteredRooms: 0,
error: null,
success: false,
};
const reducer = (state = initialStore, action) => {
switch (action.type) {
case actionType.ALL_ROOM_SUCCESS:
return {
...state,
success: true,
rooms: action.rooms,
roomsCount: action.roomsCount,
resPerPage: action.resPerPage,
filteredRooms: action.filteredRooms,
};
case actionType.ALL_ROOM_FAILED:
return {
...state,
error: action.err,
};
}
};
If at first I use this reducer, it'll be successful so success will be true and error will be null. But if it fails the 2nd time and I use ...state in this situation, what is the success value? Is it the initial value (false) or does it keep the value from the first request (true)?
That is called the spread operator and it basically allows you to "clone" the fields of one object into a new object.
In your example, { ...state, error: action.err } means "copy all fields from state, but set the field error to action.err". It's very handy for this kind of logic where you want to change a very few fields but otherwise want to keep the original data.
I'm working with react redux and want use spread syntax on a reducer in order to return and updated object which contains a collection element where I want to add objects.
I have the following reducer logic which is not working because the collection is being filled with the payload object values instead of the object itself:
export default function(state = INITIAL_STATE, action){
switch (action.type){
case CREATE:
return {...INITIAL_STATE,collection:{...state.collection,...action.payload}};
default:
return state;
}
}
The payload is an object like:
{
'DG67QBXQJW7':{
key:'12345',
price:'15',
name:'test'
}
};
And the returned state I would like to have something like:
{
name:'items',
collection:{
'DG67QBXQJW7':{
key:'12345',
price:'15',
name:'test'
},
'FB843VUV3N9':{
key:'67890',
price:'11',
name:'test2'
}
}
}
But I got with my previous showed logic something like:
{
name:'items',
key:'12345',
price:'15',
name:'test'
}
If someone could help or show me an advanced and good spread syntax guide for this kind of operations would be great.
Thanks in advance.
You just need to use your current state, not INITIAL_STATE, as the base of your object.
return {...state, collection: {...state.collection, ...action.payload}};
Test example:
const state = { name: 1, collection: { test3: { a: 3}, test4: {a: 4}}};
const payload = { test5: { a: 5 }};
console.log({...state, collection: {...state.collection, ...payload}});
I want to add a post to an array of posts in the reducer.
Normally I would just do this:
CREATE_NEW__POST_SUCCESS: {
return {
...state,
fetchingPosts: false,
error: null,
posts: [...state.posts, ...action.payload],
};
However my current project requires me to use Immutable.js
With Immutable the state is set with .set() or .merge() or .update()
case CREATE_NEW_POST_SUCCESS: {
return state
.set('fetchingPosts', false)
.set('posts', action.payload)
.set('postsError', null);
This overwrites the whole array of posts with just one post object.
I tried lots of things like
.set('posts' ,[...state.posts, ...action.payload])
But no joy
You can use updateIn similarly to the answer here.
case CREATE_NEW_POST_SUCCESS: {
return state
.set('fetchingPosts', false)
.updateIn(['posts'], posts => posts.push(action.payload))
.set('postsError', null);
I think state.merge() and concat() could work here:
case CREATE_NEW_POST_SUCCESS: {
return state.merge({
fetchingPosts: false,
posts: state.get('posts').concat(action.payload),
postError: null,
})
}
I have an issue where re-rendering of state causes ui issues and was suggested to only update specific value inside my reducer to reduce amount of re-rendering on a page.
this is example of my state
{
name: "some name",
subtitle: "some subtitle",
contents: [
{title: "some title", text: "some text"},
{title: "some other title", text: "some other text"}
]
}
and I am currently updating it like this
case 'SOME_ACTION':
return { ...state, contents: action.payload }
where action.payload is a whole array containing new values. But now I actually just need to update text of second item in contents array, and something like this doesn't work
case 'SOME_ACTION':
return { ...state, contents[1].text: action.payload }
where action.payload is now a text I need for update.
You can use map. Here is an example implementation:
case 'SOME_ACTION':
return {
...state,
contents: state.contents.map(
(content, i) => i === 1 ? {...content, text: action.payload}
: content
)
}
You could use the React Immutability helpers
import update from 'react-addons-update';
// ...
case 'SOME_ACTION':
return update(state, {
contents: {
1: {
text: {$set: action.payload}
}
}
});
Although I would imagine you'd probably be doing something more like this?
case 'SOME_ACTION':
return update(state, {
contents: {
[action.id]: {
text: {$set: action.payload}
}
}
});
Very late to the party but here is a generic solution that works with every index value.
You create and spread a new array from the old array up to the index you want to change.
Add the data you want.
Create and spread a new array from the index you wanted to change to the end of the array
let index=1;// probably action.payload.id
case 'SOME_ACTION':
return {
...state,
contents: [
...state.contents.slice(0,index),
{title: "some other title", text: "some other text"},
...state.contents.slice(index+1)
]
}
Update:
I have made a small module to simplify the code, so you just need to call a function:
case 'SOME_ACTION':
return {
...state,
contents: insertIntoArray(state.contents,index, {title: "some title", text: "some text"})
}
For more examples, take a look at the repository
function signature:
insertIntoArray(originalArray,insertionIndex,newData)
Edit:
There is also Immer.js library which works with all kinds of values, and they can also be deeply nested.
You don't have to do everything in one line:
case 'SOME_ACTION': {
const newState = { ...state };
newState.contents =
[
newState.contents[0],
{title: newState.contents[1].title, text: action.payload}
];
return newState
};
I believe when you need this kinds of operations on your Redux state the spread operator is your friend and this principal applies for all children.
Let's pretend this is your state:
const state = {
houses: {
gryffindor: {
points: 15
},
ravenclaw: {
points: 18
},
hufflepuff: {
points: 7
},
slytherin: {
points: 5
}
}
}
And you want to add 3 points to Ravenclaw
const key = "ravenclaw";
return {
...state, // copy state
houses: {
...state.houses, // copy houses
[key]: { // update one specific house (using Computed Property syntax)
...state.houses[key], // copy that specific house's properties
points: state.houses[key].points + 3 // update its `points` property
}
}
}
By using the spread operator you can update only the new state leaving everything else intact.
Example taken from this amazing article, you can find almost every possible option with great examples.
This is remarkably easy in redux-toolkit, it uses Immer to help you write immutable code that looks like mutable which is more concise and easier to read.
// it looks like the state is mutated, but under the hood Immer keeps track of
// every changes and create a new state for you
state.x = newValue;
So instead of having to use spread operator in normal redux reducer
return {
...state,
contents: state.contents.map(
(content, i) => i === 1 ? {...content, text: action.payload}
: content
)
}
You can simply reassign the local value and let Immer handle the rest for you:
state.contents[1].text = action.payload;
Live Demo
In my case I did something like this, based on Luis's answer:
// ...State object...
userInfo = {
name: '...',
...
}
// ...Reducer's code...
case CHANGED_INFO:
return {
...state,
userInfo: {
...state.userInfo,
// I'm sending the arguments like this: changeInfo({ id: e.target.id, value: e.target.value }) and use them as below in reducer!
[action.data.id]: action.data.value,
},
};
Immer.js (an amazing react/rn/redux friendly package) solves this very efficiently. A redux store is made up of immutable data - immer allows you to update the stored data cleanly coding as though the data were not immutable.
Here is the example from their documentation for redux:
(Notice the produce() wrapped around the method. That's really the only change in your reducer setup.)
import produce from "immer"
// Reducer with initial state
const INITIAL_STATE = [
/* bunch of todos */
]
const todosReducer = produce((draft, action) => {
switch (action.type) {
case "toggle":
const todo = draft.find(todo => todo.id === action.id)
todo.done = !todo.done
break
case "add":
draft.push({
id: action.id,
title: "A new todo",
done: false
})
break
default:
break
}
})
(Someone else mentioned immer as a side effect of redux-toolkit, but you should use immer directly in your reducer.)
Immer installation:
https://immerjs.github.io/immer/installation
This is how I did it for one of my projects:
const markdownSaveActionCreator = (newMarkdownLocation, newMarkdownToSave) => ({
type: MARKDOWN_SAVE,
saveLocation: newMarkdownLocation,
savedMarkdownInLocation: newMarkdownToSave
});
const markdownSaveReducer = (state = MARKDOWN_SAVED_ARRAY_DEFAULT, action) => {
let objTemp = {
saveLocation: action.saveLocation,
savedMarkdownInLocation: action.savedMarkdownInLocation
};
switch(action.type) {
case MARKDOWN_SAVE:
return(
state.map(i => {
if (i.saveLocation === objTemp.saveLocation) {
return Object.assign({}, i, objTemp);
}
return i;
})
);
default:
return state;
}
};
I'm afraid that using map() method of an array may be expensive since entire array is to be iterated. Instead, I combine a new array that consists of three parts:
head - items before the modified item
the modified item
tail - items after the modified item
Here the example I've used in my code (NgRx, yet the machanism is the same for other Redux implementations):
// toggle done property: true to false, or false to true
function (state, action) {
const todos = state.todos;
const todoIdx = todos.findIndex(t => t.id === action.id);
const todoObj = todos[todoIdx];
const newTodoObj = { ...todoObj, done: !todoObj.done };
const head = todos.slice(0, todoIdx - 1);
const tail = todos.slice(todoIdx + 1);
const newTodos = [...head, newTodoObj, ...tail];
}
Pay attention to the data structure:
in a project I have data like this
state:{comments:{items:[{...},{...},{...},...]} and to update one item in items I do this
case actionTypes.UPDATE_COMMENT:
const indexComment = state.comments.items.findIndex(
(comment) => comment.id === action.payload.data.id,
);
return {
...state,
comments: {
...state.comments,
items: state.comments.items.map((el, index) =>
index === indexComment ? { ...el, ...action.payload.data } : el,
),
},
};
Note: in newer versions (#reduxjs/toolkit), Redux automatically detects changes in object, and you don't need to return a complete state :
/* reducer */
const slice = createSlice({
name: 'yourweirdobject',
initialState: { ... },
reducers: {
updateText(state, action) {
// updating one property will cause Redux to update views
// only depending on that property.
state.contents[action.payload.id].text = action.payload.text
},
...
}
})
/* store */
export const store = configureStore({
reducer: {
yourweirdobject: slice.reducer
}
})
This is how you should do now.