Как использовать redux-persist для вызова API выбранных элементов - PullRequest
Новая
       70

Как использовать redux-persist для вызова API выбранных элементов

0 голосов
/ 12 марта 2019

Я делаю приложение на реактивном языке для Android с использованием приставки и с помощью реактивной навигации Wix для навигации между экранами. Я храню список всех данных, извлеченных из API в хранилище избыточных данных. Я использую 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;
  }
}

1 Ответ

0 голосов
/ 12 марта 2019

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

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