I am getting the error:Invariant failed: A state mutation was detected between dispatches, in the path 'feedReducer.quickSources.0.isSelect'
I have tried resolving this for several days and have no idea what the problem is. Specifically, the error is showing up on the following line:
dispatch(postDataAndGetMore('source',4,yesIds,noIds)).then(()=>{
Code within the reducer
const initialState = {userToken:'',quickSources: []};const feedReducer = ( state = initialState, action: {type: String; payload: any},) => { switch (action.type) { case GET_QUICK_SOURCES: return {...state, quickSources: action.payload}; default: return state; }};export default feedReducer;
Code within actions.ts
// used to post ratings and retrieve more export const postDataAndGetMore = (otype: String = 'source', batchSize: number = 4, scope: String = 'interesting', up: number[]=[], down:number[]=[]) => async (dispatch: Function, getState: Function) => { try { const accessToken = await getState().feedReducer.userToken; const res = await apiClient.post( `getData/${otype}?user_token=${accessToken}&batch_size=${batchSize}&unrated=1`, { scope: scope, up: up, down: down } ); if (res.status === 200) { if(otype == 'source') { dispatch({ type: GET_QUICK_SOURCES, payload: res?.data?.articles, }); } } else { console.warn('Something went wrong'); } } catch (error) { console.warn('ERROR in postDataAndGetMore') console.error(error); } };
Code within the screen DataFeed.ts
export const DataFeed: React.FC = () => { const {quickSources, loggedIn} = useSelector( (state: any) => state.feedReducer, ); const [modifiedNewsFeed, setModifiedNewsFeed] = useState([]);const dispatch: Function = useDispatch();// called by pressing a button in mobile appconst handleSubmit = () => { let yesIds:number[] = []; let noIds:number[] = []; modifiedNewsFeed.forEach((row: any)=>{ if(row.isSelect) { yesIds.push(parseInt(row.sourceId)) } else { noIds.push(parseInt(row.sourceId)) } })// this posts selection info and returns 4 new selections to vote ondispatch(postDataAndGetMore('source',4,yesIds,noIds)).then(()=>{ //let sourceCopy = Object.assign([], quickSources); //tried this too let sourceCopy = JSON.parse(JSON.stringify(quickSources)) if(sourceCopy) { const modifiedData = sourceCopy.map(item => { item.isSelect = false; item.selectedClass = styles.list; return item; }); setModifiedNewsFeed(modified) } })}}