с использованием redux-persist с redux thunk - PullRequest
Новая
       74

с использованием redux-persist с redux thunk

0 голосов
/ 31 марта 2020

Привет, ребята, я использовал Redux Thunk со следующим js, и теперь я хочу добавить Redux-Persist в мое приложение. Итак, изначально мой код выглядит как 

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';

export const makeStore = (initialState, options) => {
    return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunk)));
};

Может ли кто-нибудь помочь мне только в настройке с сохранением приставки сейчас? Я пробовал какое-то решение, но не сработало

Ответы [ 2 ]

1 голос
/ 05 апреля 2020

Вот ссылка статьи с простыми, но подробными инструкциями по интеграции и использованию пакета в существующем приложении.

Обычно я придерживаюсь той же структуры, что и у вас для магазин редуксов. Эта интеграция всегда работает для меня. Надеюсь, это вам тоже поможет.

1 голос
/ 01 апреля 2020

Если вам действительно нужно сохранить ваш redux state, насколько я знаю, есть два варианта: сначала вы можете использовать react-persist в соответствии с вашим sh, как это 

import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
    key: 'reducer',
    storage: storage,
    whitelist: ['reducer'] // or blacklist to exclude specific reducers
 };
const presistedReducer = persistReducer(persistConfig, reducer );
const store = createStore(presistedReducer, 
composeWithDevTools(applyMiddleware(thunk)));
const persistor = persistStore(store);
export { persistor, store };

, а затем в вашем component вы делаете следующее, как указано в их documentation

import { PersistGate } from 'redux-persist/integration/react';

// ... normal setup, create store and persistor, import components etc.

const App = () => {
return (
   <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
   </Provider>
  );
};

, или вы можете просто сделать следующее without relying on a library

import {
  createStore, combineReducers, compose, applyMiddleware,
 } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';
function saveToLocalStorage(state) {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('state', serializedState);
}

function loadFromLocalStorage() {
const serializedState = localStorage.getItem('state');
if (serializedState === null) return undefined;
   return JSON.parse(serializedState);
}

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const presistedState = loadFromLocalStorage();
const store = createStore(
    reducer,
    presistedState,
    composeEnhancers(applyMiddleware(thunk)),
 );
store.subscribe(() => saveToLocalStorage(store.getState()));
export default store;
...