Получите доступ к данным в формате redux-persist (реагируйте на родную) - PullRequest
Новая
       26

Получите доступ к данным в формате redux-persist (реагируйте на родную)

0 голосов
/ 30 сентября 2018

Я новичок в реакт-редуксе.Я пытаюсь приложение Todo, используя Redux.Здесь мне нужно сохранить данные и показать их, как только приложение откроется, для чего используется redux-persist.И это прекрасно работает.Тот, где я застрял, находится в действии.Я инициализировал id = 0 здесь.Следовательно, каждый раз, когда приложение открывается, оно сохраняет данные с id = 0 и затем увеличивается.Как я могу ссылаться на последний идентификатор, сохраненный из persist, и использовать его при добавлении новых данных?

App.js 

export const persistor = persistStore(store);

class App extends Component<Props> {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={<ActivityIndicator />} persistor={persistor}>
          <ToDoApp />
        </PersistGate>
      </Provider>
    );
  }
}

store 

const persistConfig = {
     key: 'root',
     storage,
     stateReconciler: autoMergeLevel2 
};

const pReducer = persistReducer(persistConfig, rootReducer);

export default (store = createStore(pReducer));

action

import { ADD_TODO, TOGGLE_TODO } from './actionTypes';

let nextId = 0; // how to initialize nextId as the last id from persisted data?
export const addToDoo = text => ({
  type: ADD_TODO,
  id: nextId++,
  text
});

export const toggleTodo = id => ({
  type: TOGGLE_TODO,
  id
});

1 Ответ

0 голосов
/ 01 октября 2018

Я пока не использовал redux-persist, я использую эту технику , но это не по теме, ваша проблема связана только с redux.

Это не такработа создателя действия по назначению идентификатора для новой задачи, это работа редуктора.Ваше действие может выглядеть следующим образом: 

const addTodo = text => ({
  type: ADD_TODO,
  text,
})

Это находится в редукторе, который должен находиться nextId.При запуске (или перезагрузке страницы) это будет 0 или значение, сохраненное в localStorage.Там он будет увеличиваться каждый раз, когда возникает действие ADD_TODO: 

const initialState = {
  nextId: 0,
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      //...
    case 'TOGGLE_TODO':
      //...
    default:
      return state
  }
}

Я вижу, redux-persist выполняет всю магию сериализации состояния в хранилище (localStorage для браузера и AsyncStorage для React-Native) и извлекает егопри запуске.Для справки, это то, что я бы сделал для чистого React-приложения (по-старому с localStorage):

  • В корне index.js после createStore I получить значение из хранилища:const nextIdFromLS = storage.getItem("nextId")
  • если это значение существует, я запускаю действие, чтобы установить это значение nextId store.dispatch(setNextId(nextIdFromLS))
  • действие SET_NEXT_ID заставляет редуктор обновлять состояние с помощью nextId из localStorage
  • в следующий раз, когда будет добавлен todo, внутри case "ADD_TODO": я сохраню новый todo, как и ожидалось, но я также запустил бы localStorage.setItem("nextId", this.state.nextId++), чтобы мы сохранили значение и могли обновить страницу
...