Блог

Я создаю приложение на react-native для Android с использованием redux и использую react-native-navigation от Wix для навигации между экранами. Я сохраняю список всех данных, извлеченных из API, в хранилище redux. Я использую redux-persist для отображения списка, присутствующего в магазине, если пользователь находится в автономном режиме. В приложении после нажатия на любой элемент он переходит на новую страницу и вызывает новый API с идентификатором выбранного элемента, например fetch(constants.BaseURL /api/detail/${id} . Теперь я хочу отобразить эти данные также в автономном режиме, как я могу это сделать?

Мой configureStore.js

 import { createStore, combineReducers, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { persistStore, persistCombineReducers } from 'redux-persist';
import storage from 'redux-persist/es/storage';

import masjids from "./reducers/productReducer";
import { root } from "./reducers/rootReducer";


const config = {
  key: 'root',
  storage,
} 

const reducers = {
  root,
  masjids
}

const reducer = persistCombineReducers(config, reducers)

let composeEnhancers = compose;

if (__DEV__) {
  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}

const configureStore = () => {
  return createStore(reducer, composeEnhancers(applyMiddleware(thunk)));
};

export default configureStore;
  

Мне было интересно, не хотел бы кто-нибудь поделиться своим решением. Заранее спасибо.

productReducer.js

 import * as types from "../actions/masjidList/ActionTypes";

  const initialState = {
    items: [],
  };

  export default function masjidListReducer(
    state = initialState,
    action
  ) {
    switch (action.type) {
      case types.FETCH_MASJIDS_SUCCESS:
        return {
          ...state,
          items: action.payload.masjids
        };
      default:
        return state;
    }
  }
  

rootReducer.js

 import * as types from '../actions/login/ActionTypes';
import Immutable from 'seamless-immutable';

const initialState = Immutable({
  root: undefined, // 'login' / 'after-login' / 'register'
});

//root reducer
export function root(state = initialState, action = {}) {

  switch (action.type) {

    case types.ROOT_CHANGED:
    return {...state,root:action.root}

    default:
      return state;
  }
}
  

Вы должны передать все свои редукторы в хранилище. Переданные будут сохранены. Убедитесь, что вы сохранили ответ после выборки. Я предлагаю вам создать отдельный файл reducer и использовать вызов combineReducers для получения одноэлементного объекта.

 import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import ReduxThunk from 'redux-thunk';
import storage from 'redux-persist/lib/storage';

//import all the reducers
import reducers from '../reducers';

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

const persistedReducer = persistReducer(persistConfig, reducers);

export const store = createStore(
  persistedReducer,
  {},
  applyMiddleware(ReduxThunk)
);
export const persistor = persistStore(store);