Redux Persist: some part of state not being persisted

Question

I'm using redux with redux-persist and redux-thunk.

Only some part of state is not being persisted. what could be the reason? is it a way to force persist the current state? When I call reducers, state gets updated. but when I reload the app, some part of state is still the old one. (empty)

I thought it is taking some parts of state from initialstate, so I added some entries to initialstate, even so, it's returning empty objects. not getting them from initialState.

Thanks in advance.

only discussionStudents gets persisted

Store setup:

import React from "react";
import { View, AsyncStorage } from 'react-native';
import { applyMiddleware, createStore, compose } from 'redux';
import { Provider } from 'react-redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import { reducer } from './reducers';
import Container from './Container';

const middlewares = [thunk];

const logger = createLogger();
middlewares.push(logger);

const store = createStore(reducer, compose(
  applyMiddleware(...middlewares)
), autoRehydrate({ log: true }));

persistStore(store, {storage: AsyncStorage});

const Root = () => (
  <Provider store={store}>
    <Container />
  </Provider>
);

export default Root;

parts of the reducer :

import {REHYDRATE} from 'redux-persist/constants';
export const types = {
    SYNCHRONISE_DISCUSSIONS: 'SYNCHRONISE_DISCUSSIONS'
};
export const actionCreators = {
    synchroniseDiscussions: (args) => {
        return dispatch => {
            /// Call API
            synchroniseDiscussionsAPI()
            .then((res) => {
                return dispatch(synchroniseDiscussions(res))
            })
            .catch((e) => {
                console.log(e)
            })

        }
    }
}
const synchroniseDiscussions = (args) => {
    return {type: types.SYNCHRONISE_DISCUSSIONS, payload: args}
}
const initialState = {
    rehydrated: false,
    discussionStudents: [],
    discussionGroups: [],
    discussionsMessages: [],
    discussionParticipants: []
}
export const reducer = (state = initialState, action) => {
    const {
        discussionStudents,
        discussionGroups,
        discussionsMessages,
        discussionParticipants
    } = state;
    const {type, payload} = action;
switch (type) {
case types.SYNCHRONISE_DISCUSSIONS:
            {
                const oldStudents = discussionStudents
                const newStudents = payload.discussionStudents
                var parsedStudents = []

                oldStudents.forEach((old, i)=>{
                    if(newStudents.findIndex(newstd => newstd.userId == old.userId) < 0){
                        parsedStudents.push({
                            ...old,
                            status: 'inactive'
                        })
                    }
                })

                newStudents.forEach((newStudent, i)=>{
                    if(parsedStudents.findIndex(pstd => pstd.userId == newStudent.userId) < 0){
                        parsedStudents.push({
                            ...newStudent,
                            status: 'active'
                        })
                    }
                })
                var newdiscussionParticipants = payload.discussionParticipants
                var newdiscussionGroups = payload.discussionGroups

                return Object.assign({}, state, {
                    discussionStudents: parsedStudents,
                    discussionParticipants: newdiscussionParticipants,
                    discussionGroups: newdiscussionGroups
                })
            }
case REHYDRATE:
            {
                return {
                    ...state,
                    rehydrated: true
                }
            }
    }
    return state
}

it seems you are doing mutation in your reducer, not a good practice — Manjeet Singh
@ManjeetSingh Could you please tell me in which part you saw that? — Ata Mohammadi
I am not sure, but push is mutating function, spread operator and concat should have done your task — Manjeet Singh
@ManjeetSingh I'm not pushing to state. pushing to an array, then making a new object of state with Object.assign. I'm not doing anything like state.push as you can see in the code. — Ata Mohammadi

Ata Mohammadi Ata Mohammadi · Accepted Answer · 2017-05-12T07:55:09

I've found the issue. Issue was that I was using for loops inside the function. and promise was being resolved before the loop finishes. Issue solved by replacing the built in javascript loop with a custom asynchronous loop :

const asyncLoop = (iterations, func, callback) => {
    var index = 0;
    var done = false;
    var loop = {
        next: function() {
            if (done) {
                return;
            }
            if (index < iterations) {
                index++;
                func(loop);
            } else {
                done = true;
                callback();
            }
        },
        iteration: function() {
            return index - 1;
        },
        break: function() {
            done = true;
            callback();
        }
    };
    loop.next();
    return loop;
}

Redux Persist: some part of state not being persisted

1 Answers