【问题标题】:What's wrong with my redux-saga我的 redux-saga 出了什么问题
【发布时间】:2016-09-08 22:07:15
【问题描述】:

我创建了一个 React Native 应用程序。我的index.ios.js 将中间件添加到商店。

import React, { Component } from 'react'
import {
  AppRegistry,
} from 'react-native'
import { Provider } from 'react-redux'
import { applyMiddleware, createStore } from 'redux'
import createLogger from 'redux-logger'
import createSagaMiddleware from 'redux-saga'

import reducer from './src/reducers'
import * as sagas from './src/sagas'
import Scene from './src/components/scene'

const store = createStore(
  reducer,
  applyMiddleware(createSagaMiddleware(...sagas), createLogger())
);

const CitiesApp = () => (
  <Provider store={store}>
    <Scene />
  </Provider>
);

AppRegistry.registerComponent('CitiesApp', () => CitiesApp);

我有一个动作:

export const USER_FETCH_REQUESTED = 'USER_FETCH_REQUESTED';
export const fetchUser = () => ({
  type: USER_FETCH_REQUESTED
});

我在组件中从componentDidMount 调用

componentDidMount() {
  this.props.dispatch(fetchUser());
  console.log('componentDidMount')
}

我还有一个传奇:

export function* watchUserFetch() {
  console.log('watchUserFetch');
  yield take(actions.USER_FETCH_REQUESTED);
  yield fork(fetchUser);
}

function* fetchUser() {
  try {
    const user = yield call(() => Api.fetchUser());
    yield put({type: actions.USER_FETCH_SUCCEEDED, user});
  } catch (e) {
    yield put({type: actions.USER_FETCH_FAILED, message: e.message});
  }
}

但传奇行不通。我没有在控制台中看到 watchUserFetch 并且 fetchUser 函数没有运行。

我的错误在哪里?为什么fetchUser 不运行?

【问题讨论】:

    标签: javascript reactjs react-native redux redux-saga


    【解决方案1】:
    1. 创建根传奇

      export default function* rootSaga() {
          yield [
              watchUserFetch()
          ]
      }
      
    2. 然后运行 ​​rootSaga

      import createSagaMiddleware from 'redux-saga';
      import rootSaga  from './sagas.js';
      
      const sagaMiddle= createSagaMiddleware();
      
      const store = createStore(reducer,
          applyMiddleware(sagaMiddle,createLogger())
      );
      
      sagaMiddle.run(rootSaga);
      

    webpackbin example

    【讨论】:

      猜你喜欢
      • 2021-12-22
      • 2018-06-02
      • 1970-01-01
      • 2016-02-08
      • 2013-11-16
      • 2021-11-26
      • 2021-09-23
      • 2018-10-21
      • 2012-10-26
      相关资源
      最近更新 更多