如何对选定项API调用使用redux-persist
如何对选定项API调用使用redux-persist
提问于 2019-03-12 16:42:04
我正在使用redux和Wix的react-native导航在android的react-native中制作一个应用程序。我将从API获取的所有数据的列表存储到redux存储中。如果用户处于离线状态，我将使用redux-persist来显示商店中的列表。在应用程序中，点击任何项目后，它会转到一个新页面，并调用带有所选项目id的新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
Stack Overflow用户
发布于 2019-03-12 16:54:02
你必须把你所有的减速机都送到商店。传递的那些将被持久化。请确保在获取后存储响应。我建议你创建一个单独的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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55117217
复制相关文章
相似问题
腾讯云开发者
