Redux Persist：状态的某些部分没有被持久化答案

【问题标题】：Redux Persist: some part of state not being persistedRedux Persist：状态的某些部分没有被持久化
【发布时间】：2017-10-08 19:24:54
【问题描述】：

我将 redux 与 redux-persist 和 redux-thunk 一起使用。

只有部分状态没有被持久化。可能是什么原因？这是一种强制保持当前状态的方法吗？当我调用减速器时，状态会更新。但是当我重新加载应用程序时，状态的某些部分仍然是旧的。（空）

我认为它从初始状态中获取了部分状态，所以我在初始状态中添加了一些条目，即便如此，它还是返回了空对象。没有从 initialState 获取它们。

提前致谢。

只有讨论学生被持久化

商店设置：

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;

减速机部分：

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
}

【问题讨论】：

看来您在减速器中进行了突变，这不是一个好习惯
@ManjeetSingh 你能告诉我你在哪个部分看到的吗？
我不确定，但是 push 是变异函数，spread operator 和 concat 应该已经完成了你的任务
@ManjeetSingh 我不是在推动状态。推入一个数组，然后使用 Object.assign 创建一个新的状态对象。正如你在代码中看到的那样，我没有做任何类似 state.push 的事情。

标签： javascript react-native redux react-redux redux-thunk

【解决方案1】：

我找到了问题所在。问题是我在函数内部使用了 for 循环。并且承诺在循环结束之前被解决。通过用自定义异步循环替换内置 javascript 循环解决了问题：

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;
}

【讨论】：