React Redux + redux仍然存在：只有部分数据存在

Question

它是一个使用redux-persist的react-native app（redux-pattern），用于在用户没有互联网连接的情况下保存数据。

问题只是数据的一部分被持久化。请参见下面的屏幕截图。 auth是AsyncStorage持久保存并从courses加载而没有任何问题。但其他人evaluations，import { persistStore, autoRehydrate } from "redux-persist"; import { applyMiddleware, createStore, compose } from "redux"; import { AsyncStorage } from "react-native"; import thunk from "redux-thunk"; import createLogger from "redux-logger"; import rootReducer from "./rootReducer"; const logger = createLogger(); const store = createStore(rootReducer, compose( applyMiddleware(thunk, logger), autoRehydrate() )); persistStore(store, {storage: AsyncStorage}); export default store;，...部分持续存在。 例如，课程/课程包括userId为1，但它是一个空对象。

****更新新屏幕截图，自动补充日志： Store.js：

import * as types from "./auth.actions";
export const INITIAL_STATE = {
	token: null,
	users: {}
};

export default function auth(state = INITIAL_STATE, action) {
	const {users, token} = state;
	switch (action.type) {
		case types.AUTH_LOGIN:
		users[action.payload.userId] = {
			token: action.payload.token,
			///.... continues
		};
		return Object.assign({}, state, {
			loading: false,
			token: action.payload.token,
			user: action.payload.userId,
			users: users
		});
		case types.AUTH_LOGIN_FAILED:
		return Object.assign({}, state, {
			users,
			token
		});
		case types.AUTH_LOGOUT:
		return Object.assign({}, state, {
			token: "",
			user: "",
			users: {}
		});
		default:
			return state;
	}
}

auth.reducer.js

import * as types from "./courses.actions";

export const INITIAL_STATE = {
  courses: {}
};

export default function courses(state = INITIAL_STATE, action){
  const {courses, lectures, schedule, events, discussion} = state;
  switch(action.type){
    case types.GET_COURSES:
    return Object.assign({}, state, {
      courses: action.payload.courses,
      lectures: action.payload.lectures,
      schedule: action.payload.schedule,
      events: action.payload.events,
      discussion: action.payload.discussion
		});
    case types.GET_COURSES_FAILED:
    return state;
    case types.BOOK_COURSE:
    return state;
    case types.UNBOOK_COURSE:
    return state;
    case types.BOOK_COURSE_FAILED:
    return state;
    case types.UNBOOK_COURSE_FAILED:
    return state;
    default:
    return state;
  }
}

还有更多组件，例如，请参阅课程代码：

courses.reducer.js

export const GET_COURSES = 'GET_COURSES';
export const GET_COURSES_FAILED = 'GET_COURSES_FAILED';
export const BOOK_COURSE = 'BOOK_COURSE';
export const UNBOOK_COURSE = 'UNBOOK_COURSE';
export const BOOK_COURSE_FAILED = 'BOOK_COURSE_FAILED';
export const UNBOOK_COURSE_FAILED = 'UNBOOK_COURSE_FAILED';

import Functions from '../common/Functions';

export const getCourses = (users) => {
  return dispatch => {
    Functions.getCoursesAPI(users)
    .then((data)=>{
      const {courseList, lectureList, schedule, eventList, discussion, coursesArray} = data;
      return dispatch(coursesSuccess(courseList, lectureList, schedule, eventList, discussion, coursesArray));
      //return dispatch(coursesFailed('e'));
    })
    .catch((e)=>{
      return dispatch(coursesFailed(e));
    });
  };
};

export const bookCourse = (user, courseId, callback) => {
  return dispatch => {
    Functions.bookCourse(user, courseId, callback)
    .then((data)=>{
        return dispatch(bookCourseSuccess(data));
    })
    .catch((e)=>{
      return dispatch(bookCourseSuccessFailed(e));
    });
  };
};

export const unbookCourse = (user, courseId, callback) => {
  return dispatch => {
    Functions.unbookCourse(user, courseId, callback)
    .then((data)=>{
        return dispatch(unbookCourseSuccess(data));
    })
    .catch((e)=>{
      return dispatch(unbookCourseSuccessFailed(e));
    });
  };
};

const coursesSuccess = (courses, lectures, schedule, eventList, discussion, coursesArray) => {
  return {
    type: GET_COURSES,
    payload: {
      courses: courses,
      lectures: lectures,
      schedule: schedule,
      events: eventList,
      discussion: discussion,
      coursesArray: coursesArray
    }
  }
};

const coursesFailed = (e) => {
  return {
    type: GET_COURSES_FAILED,
    payload: {
      error: e
    }
  }
};

const unbookCourseSuccess = (data) => {
  return {
    type: UNBOOK_COURSE,
    payload: {
      data: data
    }
  };
};

const unbookCourseSuccessFailed = (e) => {
  return {
    type: UNBOOK_COURSE_FAILED,
    payload: {
      error: e
    }
  };
};

const bookCourseSuccess = (data) => {
  return {
    type: BOOK_COURSE,
    payload: {
      data: data
    }
  };
};

const bookCourseSuccessFailed = (e) => {
  return {
    type: BOOK_COURSE_FAILED,
    payload: {
      error: e
    }
  };
};

有任何解决方案吗？

***更新（由Petsome请求） courses.actions.js

Get-ChildItem "C:\Builds\zip\$today\*pc*.*" | % {Expand-Archive $_ -DestinationPath "C:\Builds\$today"}

Answer 1

根据我自己的经验，我建议您在redux商店中添加一个时间戳，以指示数据何时保留。因此，当客户端尝试从服务器获取新数据时，它可以在更新redux存储之前请求服务器的时间戳与客户端进行比较。同步客户端上的持久数据和来自服务器的持久数据可能不一致。

Answer 2

我不确定是否：

return Object.assign({}, state, {
            loading: false,
            token: action.payload.token,
            user: action.payload.userId,
            users: users
        });

是最好的选择。

根据我保持缩减器更新的经验，您必须使用...state

case YOUR_NAME_CASE:
            return {
                ...state,
                //Your keys for update
            }