這是一個使用redux-persist的反應原生應用程序(redux-pattern),用於在用戶沒有互聯網連接時保留數據的時間。React Redux + redux堅持:只有部分數據持續存在
問題只是部分數據被持續存在。看下面的截圖。 auth
持續存在並從AsyncStorage
加載沒有任何問題。但其他courses
,evaluations
,...部分持續。例如 課程/課程包括1的userId,但它是一個空對象。
**** UPDATE新截圖,原木自動補溼的: Store.js:
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(
\t applyMiddleware(thunk, logger),
\t autoRehydrate()
));
persistStore(store, {storage: AsyncStorage});
export default store;
auth.reducer.js
import * as types from "./auth.actions";
export const INITIAL_STATE = {
\t token: null,
\t users: {}
};
export default function auth(state = INITIAL_STATE, action) {
\t const {users, token} = state;
\t switch (action.type) {
\t \t case types.AUTH_LOGIN:
\t \t users[action.payload.userId] = {
\t \t \t token: action.payload.token,
\t \t \t ///.... continues
\t \t };
\t \t return Object.assign({}, state, {
\t \t \t loading: false,
\t \t \t token: action.payload.token,
\t \t \t user: action.payload.userId,
\t \t \t users: users
\t \t });
\t \t case types.AUTH_LOGIN_FAILED:
\t \t return Object.assign({}, state, {
\t \t \t users,
\t \t \t token
\t \t });
\t \t case types.AUTH_LOGOUT:
\t \t return Object.assign({}, state, {
\t \t \t token: "",
\t \t \t user: "",
\t \t \t users: {}
\t \t });
\t \t default:
\t \t \t return state;
\t }
}
很少有更多的組件,例如查看課程代碼:
courses.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
\t \t });
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;
}
}
任何解決方案嗎?
*** UPDATE(由petsome要求) courses.actions.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
}
};
};
您需要包括[最小,完整和可覈查的示例](http://stackoverflow.com/help/mcve )你的問題。總而言之:「最小化 - 儘可能少使用仍然會產生相同問題的代碼;完整 - 提供重現問題所需的所有部分;可驗證 - 測試您將要提供的代碼,以確保它再現問題」。 –
@AndrewWillems大部分代碼已被刪除。謝謝。 – Ataomega