Question

我使用 redux-thunk 和 redux-saga 作为中间件，我的操作调用成功，但是当我重新加载页面数据时丢失时，将调用生命周期方法，但不会调用服务器？

我已经尝试过这种方法，但没有帮助... 这个你能帮我吗。谢谢

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};

编辑：

添加组件代码，如注释中所述：

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

如何通过reactjs应用“使用多个redux-middleware”？

1 个答案: