传奇观察者不叫传奇工作者

Question

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

我更改了我的 watchers saga 并按照答案中的说明创建了一个 root saga，但 watcher saga 仍然没有调用 worker saga。

我的控件很好地调度了动作，并且我的 root 和 watcher 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);

另外你需要在提交事件中调用stopPropagation，否则你的页面会刷新。

最后，您的表单中有额外的div，但我认为这只是将代码移动到 stackoverflow 时的拼写错误。