기본 반응: Reducx-perist, 지속되지 않는 작업의 결과

기본 반응: Reducx-perist, 지속되지 않는 작업의 결과

RN 앱에 리액트렉스, 리듀렉스 스컹크, 리듀렉스-퍼시스트가 있어

모든 게 괜찮았어, 환원기를 교체하고 새로운 액션을 추가했어.그러나 불행히도 국가는 더 이상 지속되지 않고 있다.내가 어떤 조치를 취하든, 앱을 다시 로드한 후에, 나는 그것이 지속되지 않음을 본다.

무엇이 그것을 야기시킬 수 있을까?

여기 나의 행동/감소자들이 있다.

import { REHYDRATE } from 'redux-persist/constants';
import {Actions as routes} from 'react-native-router-flux';

export const types = {
  GET_COURSES: 'GET_COURSES',
  AUTHENTICATE: 'AUTHENTICATE',
  AUTHENTICATE_FAILED: 'AUTHENTICATE_FAILED',
  GET_EVALUATION: 'GET_EVALUATION',
  GET_EVALUATION_FAILED: 'GET_EVALUATION_FAILED',
  SUBMIT_EVALUATION: 'SUBMIT_EVALUATION',
  SUBMIT_EVALUATION_FAILED: 'SUBMIT_EVALUATION_FAILED',
  BOOK_COURSE: 'BOOK_COURSE',
  UNBOOK_COURSE: 'UNBOOK_COURSE',
  BOOK_COURSE_FAILED: 'BOOK_COURSE_FAILED',
  UNBOOK_COURSE_FAILED: 'UNBOOK_COURSE_FAILED'
};

import Functions from './common/Functions';


export const actionCreators = {
  getEvaluations: (users) => {
    return dispatch => {
      Functions.getEvaluationsAPI(users)
      .then((data)=>{
        const {evaluationsList} = data;
        return dispatch(evaluationSuccess(evaluationsList));
      })
      .catch((e)=>{
        return dispatch(evaluationFailed(e));
      });
    }
  },
  getCourses: (users) => {
    console.log('getting courses, user', 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));
      })
      .catch((e)=>{
        return dispatch(coursesFailed(e));
      });
    }
  },
  bookCourse: (user, courseId, callback) => {
    return dispatch => {
      Functions.bookCourse(user, courseId, callback)
      .then(()=>{
        Functions.getCoursesAPI([user])
        .then((data)=>{
          const {courseList, lectureList, schedule, eventList, discussion, coursesArray} = data;
          return dispatch(coursesSuccess(courseList, lectureList, schedule, eventList, discussion, coursesArray));
        })
        .catch((e)=>{
          return dispatch(coursesFailed(e));
        });
      })
      .catch((e)=>{
        return dispatch(coursesFailed(e));
      })
    }
  },
  unbookCourse: (user, courseId, callback) => {
    return dispatch => {
      Functions.unbookCourse(user, courseId, callback)
      .then(()=>{
        Functions.getCoursesAPI([user])
        .then((data)=>{
          const {courseList, lectureList, schedule, eventList, discussion, coursesArray} = data;
          return dispatch(coursesSuccess(courseList, lectureList, schedule, eventList, discussion, coursesArray));
        })
        .catch((e)=>{
          return dispatch(coursesFailed(e));
        });
      })
      .catch((e)=>{
        return dispatch(coursesFailed(e));
      })
    }
  },
  submitEvaluation: (user, users, evaluationId, evaluationData, callback) => {
    return dispatch => {
      Functions.submitEvaluation(user, users, evaluationId, evaluationData, callback)
      .then(()=>{
        Functions.getEvaluationsAPI(users)
        .then((data)=>{
          const {evaluationsList} = data;
          return dispatch(evaluationSuccess(evaluationsList));
        })
        .catch((e)=>{
          return dispatch(evaluationFailed(e));
        });
      })
      .catch((e)=>{
        return dispatch(evaluationSubmissionFailed(e));
      })
    }
  },
  authenticate: (logincode, callback) => {
    return dispatch => {
  		Functions.login(logincode)
  		.then((response)=>{
        console.log('authenticate results:', response);
        return dispatch(loginSuccess(response));
      })
      .then(()=>{
        routes.tabbar();
      })
      .catch((e)=>{
        console.log('authenticate error:', e);
        callback(e.message);
        return dispatch(loginFailed(e.message));
      })
  	}
  }
}

const loginSuccess = (response) => {
	return {
		type: types.AUTHENTICATE,
		payload: response
	};
};
const loginFailed = (response) => {
	return {
		type: types.AUTHENTICATE_FAILED,
		payload: {
			error: response
		}
	};
};

const evaluationSuccess = (evaluationsList) => {
  return {
    type: types.GET_EVALUATION,
    payload: {
      evaluations: evaluationsList
    }
  };
};

const evaluationFailed = (e) => {
  return {
    type: types.GET_EVALUATION_FAILED,
    payload: {
      error: e
    }
  };
};

const evaluationSubmissionSuccess = (evaluationsList) => {
  return {
    type: types.SUBMIT_EVALUATION,
    payload: {
      evaluatiosn: evaluationsList
    }
  };
};

const evaluationSubmissionFailed = (e) => {
  return {
    type: types.SUBMIT_EVALUATION_FAILED,
    payload: {
      error: e
    }
  };
};

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

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

const initialState = {
  rehydrated: false,
  user: null,
  login: false,
  users: {},
  courses: {},
  schedules: {},
  evaluations: {},
  lectures: {},
  goals: {},
  discussions: {},
  attendance: {},
  events: {}
}

export const reducer = (state = initialState, action) => {
  const {user, users, courses, login, schedules, evaluations, goals, discussions, attendance, events, lectures} = state;
  const {type, payload} = action;

  switch (type) {
    case types.GET_COURSES: {
      return {
        ...state,
        courses: payload.coursesArray,
        lectures: payload.lectures,
        schedules: payload.schedule,
        events: payload.events,
        discussions: payload.discussion
      }
    }
    case types.GET_COURSES_FAILED: {
      return {
        ...state
      }
    }
    case types.AUTHENTICATE: {
      let newObj = users;
      newObj[payload.userId] = payload;
      let newCourses = courses;
      newCourses[payload.userId] = [];
      let newschedules = schedules;
      newschedules[payload.userId] = [];
      let newevaluations = evaluations;
      newevaluations[payload.userId] = [];
      let newgoals = goals;
      newgoals[payload.userId] = [];
      let newdiscussions = discussions;
      newdiscussions[payload.userId] = [];
      let newattendance = attendance;
      newattendance[payload.userId] = [];
      let neweventList = events;
      neweventList[payload.userId] = [];
      let newlectures = lectures;
      newlectures[payload.userId] = [];

      return {
        ...state,
        login: true,
        user: payload.userId,
        users: newObj,
        courses: newCourses,
        schedules: newschedules,
        evaluations: newevaluations,
        goals: newgoals,
        discussions: newdiscussions,
        attendance: newattendance,
        events: neweventList,
        lectures: newlectures
      }
    }
    case types.AUTHENTICATE_FAILED: {
      return {
        ...state
      }
    }
    case types.GET_EVALUATION: {
      return {
        ...state,
        evaluations: payload.evaluations
      }
    }
    case types.GET_EVALUATION_FAILED: {
      return {
        ...state
      }
    }
    case types.SUBMIT_EVALUATION: {
      return {
        ...state,
        evaluations: payload.evaluations
      }
    }
    case types.SUBMIT_EVALUATION_FAILED: {
      return {
        ...state
      }
    }
    case types.BOOK_COURSE: {
      return {
        ...state
      }
    }
    case types.BOOK_COURSE_FAILED: {
      return {
        ...state
      }
    }
    case types.UNBOOK_COURSE: {
      return {
        ...state
      }
    }
    case types.UNBOOK_COURSE_FAILED: {
      return {
        ...state
      }
    }
    case REHYDRATE: {
      return {
        ...state,
        rehydrated: true
      }
    }
  }
  return state
}

****UPDATE : 저장소 구성 :

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 Routes from './Routes'

const logger = createLogger();

const store = createStore(reducer, compose(
  applyMiddleware(
    thunk,
    logger
  )
), autoRehydrate({ log: true }))

persistStore(store, {storage: AsyncStorage})


const Root = () => (
  <Provider store={store}>
    <Routes />
  </Provider>
)

export default Root

액션을 발송하려고 하지만 보기가 업데이트되지 않는 경우도 있다.왜 이런 일이 생기는가?여기에는 몇 가지 이유가 있을 수 있다.

환원기 인수 변경 안 함

매번 새로운 상태 개체를 반환해야 한다.불변성 같은 도서관을 이용하지 않더라도 변이를 완전히 피해야 한다.

예를 들어, 다음과 같은 환원기는 상태를 변이시키기 때문에 잘못된 것이다.

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      // Wrong! This mutates state
      state.push({
        text: action.text,
        completed: false
      })
      return state
    case 'COMPLETE_TODO':
      // Wrong! This mutates state[action.index].
      state[action.index].completed = true
      return state
    default:
      return state
  }
}

다음과 같이 다시 써야 한다.

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      // Return a new array
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      // Return a new array
      return state.map((todo, index) => {
        if (index === action.index) {
          // Copy the object before mutating
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

더 많은 코드가 있지만, Redex를 예측 가능하고 효율적으로 만드는 것이 바로 그것이다.

디스패치(행동) 호출하는 것 잊지 말기

디스패치(행동) 호출하는 것 잊지 말기

mapStateToProps가 올바른지 확인하십시오.

액션을 올바르게 보내고 환원기를 적용하고 있을 수 있지만 해당 상태가 소품으로 올바르게 변환되지 않고 있다.

동일한 문제에 대한 Redex의 전체 문제 해결 기사

참조URL: https://stackoverflow.com/questions/42117608/react-native-redux-persist-result-of-actions-not-being-persisted