javascript - 我的 redux-saga 有什么问题

标签 javascript reactjs react-native redux redux-saga

我创建了一个 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 不运行?

最佳答案

  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

关于javascript - 我的 redux-saga 有什么问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39400905/

相关文章:

css - 当放置在 <head/> 标签内时,TinyMCE React 会去除 &lt;style/> 标签

firebase - 如何在 React Native 中从 Firebase 存储中提取图像?

javascript - 无效的 geoJson 对象 - Leaflet 和 Ajax

javascript - 仅当过渡元素是组件中的根元素时才调用过渡钩子(Hook)

javascript - 在javascript中动态创建一个按钮

javascript - 根据另一个值过滤元素

javascript - 无法分配给对象的只读属性

onclick - 将子事件暴露给父事件

react-native - 使用 cookie 响应 native 图像 uri 请求

javascript - GMail 使用什么 API 通知浏览器选项卡收到电子邮件?