2017-02-06 65 views
1

這是一個使用redux-persist的反應原生應用程序(redux-pattern),用於在用戶沒有互聯網連接時保留數據的時間。React Redux + redux堅持:只有部分數據持續存在

問題只是部分數據被持續存在。看下面的截圖。 auth持續存在並從AsyncStorage加載沒有任何問題。但其他courses,evaluations,...部分持續。例如 課程/課程包括1的userId,但它是一個空對象。

enter image description here

**** UPDATE新截圖,原木自動補溼的: enter image description here 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 
 
    } 
 
    }; 
 
};

+0

您需要包括[最小,完整和可覈查的示例](http://stackoverflow.com/help/mcve )你的問題。總而言之:「最小化 - 儘可能少使用仍然會產生相同問題的代碼;完整 - 提供重現問題所需的所有部分;可驗證 - 測試您將要提供的代碼,以確保它再現問題」。 –

+0

@AndrewWillems大部分代碼已被刪除。謝謝。 – Ataomega

回答

1

我不知道,如果:

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 
      } 
+0

感謝您的回答。讓我試試看。我會在這裏更新。 – Ataomega

1

從我自己的經驗,我會建議你在你的終極版存儲添加一個時間戳指示數據何時保存。因此,當客戶端嘗試從服務器獲取新數據時,它可以在更新redux存儲庫之前向服務器請求時間戳以與客戶端進行比較。同步客戶端上的持久數據和來自服務器的數據可能會有不一致。

+0

感謝您的回答,但我沒有明白。你的答案如何與這個問題相關?狀態改變後沒有被持續。 – Ataomega

+0

每個動作之後,nextState都會持續。這就是持續存在的目的。因此,如果您想堅持某些部分,則可以使用庫提供的白名單或黑名單選項。 – Petsome

+0

這是我的問題。 nextState沒有被保留! – Ataomega