如果注入不同的容器,Redux Sagas会多次射击

Question

我们使用https://github.com/react-boilerplate/react-boilerplate并拥有包含多个组件的经典商店布局.

我们有一个redux商店,用于向购物车添加产品,这有一个副作用传奇,以将添加的产品保存到购物车数据库.

由于有多个职位要将产品添加到购物车,我们在一个页面上使用了相同的CartContainer 3次(购物车本身,产品列表和另一个产品列表).

我们现在遇到的问题是,api将被调用3次.

我猜这是因为,通过使用容器3次,我们也注射了三次佐贺.

我现在的问题是:只有一次注入Saga的正确方法是什么,而不必一次又一次地重写所有的传奇？

这是我的传奇:

import {
  call,
  put,
  select,
  takeLatest,
} from 'redux-saga/effects';
import {getRequest, putRequest} from '../../utils/request';

import {ADD_PRODUCT, LOAD_PRODUCTS} from './constants';
import {
  addProductSuccess,
  addProductError,
  productsLoaded,
  productsLoadingError,
} from './actions';
import {makeSelectProduct, makeSelectUserId} from './selectors';


/**
 * Github repos request/response handler
 */
export function* getProducts() {
  const requestURL = '/api/orders';
  const user_id = yield select(makeSelectUserId());
  try {
    let itemsData = yield call(getRequest, requestURL, user_id);
    if (itemsData) {
      itemsData = itemsData.slice(-1).items;
    }
    yield put(productsLoaded(itemsData));
  } catch (err) {
    yield put(productsLoadingError(err));
  }
}

/**
 * Github repos request/response handler
 */
export function* addProduct() {
  const requestURL = '/api/cart';
  const productData = yield select(makeSelectProduct());

  try {
    const orderData = yield call(putRequest, requestURL, productData);
    yield put(addProductSuccess(orderData.id));
  } catch (err) {
    yield put(addProductError(err));
  }
}

/**
 * Root saga manages watcher lifecycle
 */
export default function* root() {
  yield [
    takeLatest(ADD_PRODUCT, addProduct),
    takeLatest(LOAD_PRODUCTS, getProducts),
  ];
}

这是我的容器的导出部分:

export function mapDispatchToProps(dispatch) {
  return {
    onAddProduct: (id, quantity, variant) => {
      dispatch(addProduct(id, quantity, variant));
    },
    onLoadProducts: (user_id) => {
      dispatch(loadProducts(user_id));
    },
  };
}

const mapStateToProps = createStructuredSelector({
  products: makeSelectProducts(),
});

const withConnect = connect(mapStateToProps, mapDispatchToProps);

const withReducer = injectReducer({key: 'cart', reducer});
const withSaga = injectSaga({key: 'cart', saga});


export default compose(withReducer, withConnect)(CartContainer);

Answer 1

你必须改变你注入你的传奇的方式,所以它只会注入一次.

在你的 containers/App/index.js

// ...
import { compose } from 'redux';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import reducer from 'containers/CartContainer/reducer';
import saga from 'containers/CartContainer/saga';

function App() { // We don't change this part
  // ...
}


// Add this lines
const withReducer = injectReducer({ key: 'cartContainer', reducer });
const withSaga = injectSaga({ key: 'cartContainer', saga });

export default compose(
  withReducer,
  withSaga,
)(App);

现在在你的`containers/CartContainer/index.js``中

import React from 'react':

// ...

class CartContainer extends React.Component {
  // ...
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

// REMOVE THIS LINES //
// const withReducer = injectReducer({ key: 'cartContainer', reducer });
// const withSaga = injectSaga({ key: 'cartContainer', saga });

export default compose(
 // withReducer,
 // withSaga,
 withConnect,
)(CartContainer);