Как «использовать множественное избыточное промежуточное программное обеспечение» с приложением ReactionJS?

Question

Я использую redux-thunk и redux-saga в качестве middleware , и мой призыв к действию успешен, но при перезагрузке страницы данные теряются, метод жизненного цикла вызывается, но он не обращается к серверу ??

Я пробовал так, но не помогло ... пожалуйста, помогите мне с этим. Спасибо

const middlewares = [sagaMiddleware, routeMiddleware, thunk];
 const store = createStore(persistedReducer, initialState,
    composeEnhancers(applyMiddleware(...middlewares)));

Итак, я попытался сделать это так

import {applyMiddleware, compose, createStore} from "redux";
import reducers from "../reducers/index";
import {routerMiddleware} from "react-router-redux";
import createHistory from "history/createBrowserHistory";
import createSagaMiddleware from "redux-saga";
import rootSaga from "../sagas/index";
import thunk from 'redux-thunk';


const history = createHistory();
const routeMiddleware = routerMiddleware(history);
const sagaMiddleware = createSagaMiddleware();

const middlewares = [sagaMiddleware, routeMiddleware];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default function configureStore(initialState) {
  const store = createStore(reducers, initialState,
    composeEnhancers(applyMiddleware(thunk,...middlewares)));

  sagaMiddleware.run(rootSaga);


  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers/index', () => {
      const nextRootReducer = require('../reducers/index');
      store.replaceReducer(nextRootReducer);
    });
  }
  return store;
}
export {history};

Edit:

Добавить код компонента, как описано в комментариях:

let data=[];

import React, { Component } from 'react'; 
import actionName from './actions';

class extends MyClass Component { 
    constructor(props) { 
        super(props) 
        this.state = { newdata: [], }; 
    } 
    componentDidMount(){ 
        this.props.actionName(); 
        data == this.props.reducerName() 
        this.state.newdata.push(data); 
    } 
    render() { 
        return ( 
            <div> here I'm mapping data </div> 
        ) 
    }
} 

const mapStateToProps = (state) => { return { reducerName: state.reducerName, } } 
export default (mapStateToProps,{actionName}) (MyClass);

Answer 1

Из кода, который вы вставили, не похоже, что вы правильно связываете свои действия с компонентом.Вам необходимо привязать создателей ваших действий к компоненту, например так:

import React, { Component } from 'react'; 
import { bindActionCreators } from 'redux';
import actionName from './actions';

class seaportViewAll extends Component {
    ...
}

const mapStateToProps = (state) => { return { reducerName: state.reducerName, } } 
const mapDispatchToProps = (dispatch) => { return bindActionCreators({ yourAction: actionName }) }
export default (mapStateToProps, mapDispatchToProps)(seaportViewAll);

Подробнее смотрите в документации Redux: https://redux.js.org/api/bindactioncreators