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

Question

我正在使用带有 redux-persist 和 redux-thunk 的 redux。

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

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

提前致谢。

只有 discussionStudents 得到保留

商店设置：

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
}

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

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

Redux Persist: some part of state not being persisted

javascript

react-native

redux

redux-thunk

react-redux