Сочетание redux-persist и redux-dynostore и как добавить промежуточное ПО для логгеров - PullRequest
Новая
       40

Сочетание redux-persist и redux-dynostore и как добавить промежуточное ПО для логгеров

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

С помощью только redux-persist я могу легко добавить состояние syn c в локальное хранилище, но когда я пытаюсь смешать redux-persist и redux-dynostore. Я использую Browser Router. Код ничего не запускает, но я не вижу его в хранилище, вот что я попробовал: 

//src/index.js
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import {store, persistor} from './helpers';
import { Main } from './main';
import { PersistGate } from 'redux-persist/integration/react';

require('./bootstrap');

render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <Main />
        </PersistGate>
    </Provider>,
    document.getElementById('root')
);

// store and persistor 

import { createStore, applyMiddleware } from 'redux';
// import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../reducers';

import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import dynostore, { dynamicReducers } from '@redux-dynostore/core'

const persistConfig = {
    key: 'root',
    storage,
    stateReconciler: autoMergeLevel2
}
const persistedReducer = persistReducer(persistConfig, rootReducer)

const loggerMiddleware = createLogger();

const store = createStore(
    persistedReducer,
    // applyMiddleware(
    //     thunkMiddleware,
    //     loggerMiddleware
    // )
    dynostore(dynamicReducers(), {
        /* options */
    })
);

const persistor = persistStore(store);

store.subscribe(() => {
    // do something in here
});

export {store, persistor};

// в компоненте 

import React from 'react';
import { connect } from 'react-redux';
import dynamic from '@redux-dynostore/react-redux'
import subspaced from '@redux-dynostore/react-redux-subspace'
import { attachReducer } from '@redux-dynostore/redux-subspace'
import projectsReducer from "./reducers";

class Task extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.log(this.props.A);
    }

    render() {

        return (
            <div>Connect APP</div>
        );
    }
}

const mapStateToProps = state => {
    return {
        A: state.A,
        B: state.B,
    }
}

const mapDispatchToProps = dispatch => {
    return {
        loadA: (value) => dispatch({
            type: 'LOAD_A',
            value: value
        }),
    }
}

// const X = connect(
//   mapStateToProps,
//   mapDispatchToProps
// )(Task);

// export {X as TaskPage}

const X = dynamic('com_tasks', attachReducer(projectsReducer), subspaced())(Task)
const Y = connect(
  mapStateToProps,
  mapDispatchToProps
)(X);
export {Y as TaskPage}

Я пытаюсь следовать примеру в репозитории, но я не знаю, как это работает, пожалуйста, помогите мне. Благодаря.

...