Question

我阅读了有关同一问题的许多其他问题，主要是这个问题：Saga watcher not receiving or processing dispatched action

我更改了观察者的传奇，并按照答案中的说明创建了根传奇，但观察者的传奇仍然没有称为工人传奇。

我的控制程序可以很好地调度操作，并且我的根用户和观察者sagas都会被调用。

下面是我的代码。我的动作通过表单提交进行调度。以防万一，我加入了我的控件。

传奇

import { takeEvery, put, all } from 'redux-saga/effects'
import * as mutations from './mutations';

// worker
function* createItem(action) {
  alert("ok");
}

// watcher
function* watchSubmitItem() {
  yield takeEvery(mutations.SUBMIT_ITEM, createItem);
}

export default function* rootSaga() {
  yield all ([
    watchSubmitItem()
  ]);
}

商店

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { createLogger } from 'redux-logger';
import createSagaMiddleware from 'redux-saga';

const sagaMiddleware = createSagaMiddleware();
import  rootSaga  from './sagas.mock';
import * as mutations from './mutations';

export const store = createStore(
  combineReducers({
    /*stuff that doesn't matter*/
  }),

  applyMiddleware(createLogger(), sagaMiddleware)
)

sagaMiddleware.run(rootSaga)

控制

import React from 'react';
import { connect } from 'react-redux';
import * as mutations from '../store/mutations';

export const Main = ({
  submit_item,
})  => (
  <div>
    <div>
      <form onSubmit = {(e) => submit_item(e)}>
        <div>
        <div>
          <label>Thing 1</label>
          <select id = "thing1">
            <option value="op1">Option 1</option>
            <option value="op2">Option 2</option>
          </select>
        </div>

        <div>
          <label>Thing 2</label>
          <textarea id = "thing2" name = "thing2"/>
        </div>

        <div>
          <label>Thing 3</label>
          <input id = "thing3"/>
        </div>

        <div>
          <input type = "submit" value = "Submit"/>
        </div>
      </form>
    </div>
  </div>
);

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    submit_item(e) {
        let thing1 = e.target[0].value;
        let thing2 = e.target[1].value;
        let thing3 = e.target[2].value;
        
        dispatch(mutations.submit_item(thing1, thing2, thing3));
    }
  }
}

export const ConnectedMain = connect(mapDispatchToProps) (Main);

突变

export const SUBMIT_ITEM = 'SUBMIT_ITEM';

export const submit_item = (thing1, thing2, thing3) => ({
  type:SUBMIT_ITEM,
  thing1, thing2, thing3
});

Answer 1

我认为问题在于您从react-redux调用connect函数的方式。第一个参数是映射状态而不是操作。如果没有，则可以使用null。

export const ConnectedMain = connect(null, mapDispatchToProps)(Main);

此外，您需要在Submit事件中调用stopPropagation，否则您的页面将会刷新。

最后，您在表单中有额外的div，但是我认为这只是将代码移至stackoverflow时的错字。

佐贺观察者未致电佐贺工作者

1 个答案: