Доступ к данным в redux-persist (реагировать на родной)

Я новичок в react-redux. Я пробую приложение 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>
    );
  }
}

хранить

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

const pReducer = persistReducer(persistConfig, rootReducer);

export default (store = createStore(pReducer));

действие

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
});

react-native react-redux redux-persist
person Amrita Stha    schedule 30.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я пока не использовал 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 я, чтобы получить значение из хранилища: const nextIdFromLS = storage.getItem("nextId")
  • если это значение существует, я запускаю действие, чтобы установить значение nextId store.dispatch(setNextId(nextIdFromLS))
  • действие SET_NEXT_ID заставляет редуктор обновлять состояние с помощью nextId из localStorage
  • в следующий раз, когда задача будет добавлена ​​внутри case "ADD_TODO":, я сохраню новую задачу, как и ожидалось, но я бы также запустил localStorage.setItem("nextId", this.state.nextId++), чтобы сохранить значение и обновить страницу.
person Sifnos    schedule 30.09.2018
comment
В react native нет localStorage. Я думаю, что AsyncStorage эквивалентен ему, но мне сказали, что redux-persist проще и лучше. - person Amrita Stha; 01.10.2018
comment
Я пропустил эту деталь, связанную с реагированием, я обновил свой ответ;) Надеюсь, мой ответ разъяснил принцип, согласно которому данные должны находиться в состоянии и храниться там, что делает redux таким крутым. Под постоянными данными я подразумеваю данные, которые хранятся между двумя раундами действий. Действия принесут новые данные, но это текущие данные, перемещение данных. Например, Action2 не может получить доступ к необработанным данным action1, НО может получить доступ к измененному состоянию после того, как action1 произошло. - person Sifnos; 01.10.2018
comment
Мне жаль. Я тебя не понял. Я только начинаю сокращать. Не могли бы вы взглянуть на snack.expo.io/@codebyte99/reduxexample - person Amrita Stha; 01.10.2018
comment
Если вы можете посмотреть здесь: snack.expo.io/ByQ_v5k9X. Я удалил слой redux-persist, так как ваша проблема связана с redux. Идея в том, что вы утверждаете, что форма была [<todos>], я изменил ее на { nextId: <int>, list: <todos> }. Теперь я могу увеличивать значение nextId каждый раз, когда приходит ADD_TODO, и использовать этот идентификатор для нового дела. - person Sifnos; 01.10.2018
comment
Извините, есть небольшая опечатка над новой формой состояния { nextId: <int>, list: [<todos>] }. Обратите внимание, что я инициализирую состояние редуктора с помощью { nextId: 0, list: [] }. - person Sifnos; 01.10.2018
comment
Огромное спасибо - person Amrita Stha; 02.10.2018