javascript - 如何设置redux-sagas和文件结构？

我在学习如何安装jwt并将其应用于我的React native之后，我正在使用React-native，axios，我看到没有状态管理，我必须传递从登录身份验证中获取的jwt token ，作为我开始讨厌的多个lvl的支柱。所以我研究并查看了redux, redux-thunk, redux-saga，然后选择了redux-saga。

任何可以指导我设置redux-sagas的文件夹结构，代码拆分示例，我有2页的产品，固件。

在redux-thunk中

action/
      /actionProduct.js
      /actionFirmware.js
reducer/
       /index.js
       /productReducer.js
       /firmwareReducer.js
store.js
index.js

但在redux-sagas中，我开始感到困惑
它也有作用， reducer ，水 Vapor 和存储也是不同的设置。

const sagaMiddleware = createSagaMiddleware();
// mount it on the Store
const store = createStore(reducer, applyMiddleware(sagaMiddleware));

// then run the saga
sagaMiddleware.run(mySaga);
export default store;

在redux-thunk中，我从未见过像sagaMiddleware.run(mySaga);这样的类似语法

我是否需要创建sagas文件夹并添加2个sagas，例如productSagas，firmwareSagas？

我需要写2行吗

sagaMiddleware.run(productSagas);
sagaMiddleware.run(firmwareSagas);
export default store;

或者我们可以设置动态存储？我该怎么办？
在先进的感谢。



我不确定我是否已正确设置此设置，或者不让我查看设置。
Store.js

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  window.devToolsExtension && process.env.NODE_ENV !== 'production' ?
  compose(
    applyMiddleware(sagaMiddleware),
    window.devToolsExtension(),
  ) :
  applyMiddleware(sagaMiddleware),
);

sagaMiddleware.run(rootSaga);

export default store;

rootSaga文件

export default function* rootSaga() {
    yield all([
        firmwareWatcher(),
        productWatcher(),
    ]);
}

rootReducer

export default const rootReducer = combineReducers({
    firmware,
    porduct,
});

App.js

class App extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: "FIRMWARE_REQUEST"});
    dispatch({ type: 'PRODUCT_REQUEST'});
  }
....
}
const mapStateToProps = (state) => {
  console.log(state);
  return { ... };
};

这是我得到的mapStateToProps内的console.log(state)，在转换情况下我consone.log知道操作类型

    PRODUCT_SUCCESS
        {type: "PRODUCT_SUCCESS", payload: {…}, @@redux-saga/SAGA_ACTION: true}
        {firmware: {…}, porduct: {…}}
    FIRMWARE_SUCCESS
        {type: "API_CALL_SUCCESS", payload: {…}, @@redux-saga/SAGA_ACTION: true}
    default
        {firmware: {…}, porduct: {…}}
    {firmware: {…}, porduct: {…}}
  |
  V
firmware : {fetching: false, dog: null, error: null, data: "https://dog.ceo/api/img/retriever-golden/n02099601_2495.jpg"}
porduct :
    data : {id: 120, name: "A1", image: "a1_12-16-2017-1513389068.jpg", price: "28.00", status: 1, …}

最佳答案

您无需运行各个单独的sagas，因为您正在使用sagaMiddleware，因此所有操作都将通过您的sagas进行。我认为您在正确的道路上-这是我如何设置Sagas。

为每个异步组件productSaga.js和firmwareSaga.js创建一个传奇。

然后为您的sagas index-sagas.js创建一个索引文件。这将导入项目周围的所有sagas，并将其导出以在index.js文件中使用。

/// index-sagas.js ///
import productWatcher from './components/product/product-saga.js';
import firmwareWatcher from './components/firmware/firmware-saga.js';

export default function* IndexSagas() {
  yield [
    productWatcher(),
    firmwareWatcher(),
  ]
}
/// end of file ///

这是您在index.js顶部导入的内容:

/// index.js ///
import IndexSagas from './index-sagas.js'

...

/// end of file ///

在product-saga.js和firmware-saga.js中创建一对生成器函数

/// product-saga.js ///
import { PRODUCT_ACTION } from './constants';
import { productActionSuccess, productActionError } from './actions';

export default function* productWatcher() {
  yield [
    takeLatest(PRODUCT_ACTION, productActionFlow)
  ]
}
// This will be triggered any time PRODUCT_ACTION is dispatched and it
// will call the productActionFlow generator.  This is
// where your async logic lives

function* productActionFlow(action) {
  try {
    const result = yield call(productGETRequest, action)
    // productGETRequest is a function elsewhere in this file that
    // will make your GET request
    yield put(productActionSuccess(result))
    // productActionSuccess is the action imported above
  } catch (error) {
    yield put(productActionError(error)
  }
}