Error: Invariant failed: A state mutation was detected between dispatches in next js

When I try to change the state from the front-end, the error shows...

Error: Invariant failed: A state mutation was detected between dispatches, in the path 'products.productAttributes.0.attribute'. This may cause incorrect behavior. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)

My Reducer :

    import {
GET_PRODUCTS_BY_QUERY,
GET_PRODUCT_BY_ID,
GET_PRODUCTS,
PRODUCT_DATA_ON_PROGRESS,
PRODUCT_DATA_SUBMIT_PROGRESS,
OPEN_PRODUCT_SIDEBAR,
BIND_PRODUCT_BASIC_INFO,
BIND_PRODUCT_ATTRIBUTES,
} from '../action-types';
import { ProductBasicInfoModal, attributes } from '../model';
const initialState = {
dataProgress: false,
submitProductDataProgress: false,
openProductSidebar: false,
products: [],
productAttributes: attributes,
product: ProductBasicInfoModal,
total: 1,
queryParams: {},
queryObj: {},
};
const productReducers = (state = initialState, action) => {
switch (action.type) {
case GET_PRODUCTS_BY_QUERY:
return {
...state,
products: action.products,
total: action.total,
queryParams: action.queryParams,
queryObj: action.queryObj,
};
case GET_PRODUCT_BY_ID:
return {
...state,
product: action.product,
};
case BIND_PRODUCT_BASIC_INFO:
return {
...state,
product: action.product,
};
case BIND_PRODUCT_ATTRIBUTES:
return {
...state,
productAttributes: action.attributes,
};
case PRODUCT_DATA_ON_PROGRESS:
return {
...state,
dataProgress: action.dataProgress,
};
case PRODUCT_DATA_SUBMIT_PROGRESS:
return {
...state,
submitProductDataProgress: action.submitProductDataProgress,
};
case OPEN_PRODUCT_SIDEBAR:
return {
...state,
openProductSidebar: action.openProductSidebar,
};
default:
return state;
}
};
export default productReducers;

Then My Action:

export const bindProductAttributes = (data) => (dispatch) => {
dispatch({
type: BIND_PRODUCT_ATTRIBUTES,
attributes: data,
});
};

Here is my Component Function:

**

const dispatch = useDispatch();
const { product, productAttributes } = useSelector(
({ products }) => products
);
const handleDropdownOChange = (data, e, rowId) => {
const { name } = e;
const attributes = [...productAttributes].map((att) => {
if (att.id === rowId) {
att[name] = data;
}
return att;
});
dispatch(bindProductAttributes(attributes));
};

**

I faced the problem when the action handleDropdownOChange is fired!

Please Help me !

The issue is most likely the line att[name] = data;. This mutates att, and that variable is an object that originally came from the Redux store. Don't do that

The best answer here is to instead dispatch an action that might contain the row ID and the data, and let the reducer take care of handling the update:

• https://redux.js.org/style-guide/#put-as-much-logic-as-possible-in-reducers
• https://redux.js.org/style-guide/#reducers-should-own-the-state-shape

You should also use Redux Toolkit's createSlice to write that reducer.

Those pieces together will make it much simpler to manage the update, and eliminate the accidental mutation problem.