Redux-Saga不经过Saga就以某种方式简化了减速器的更新

Question

我是传奇世界的新手。尽管我在thunk地区与react-native合作，但目前我很困惑。我正在尝试使我的项目的框架进行下去，我希望它很快会变得很大。考虑到这一点，我试图将逻辑分为多个文件。

除了不是我想要的方式，我已经让减速器点火。我不确定情况如何。我的传奇故事不会触发，但我的状态会更新。我从我的reducer看到控制台日志，但从saga watcher函数中看不到任何日志。我应该改变什么？

Index.js

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { Provider } from 'react-redux'

import reducer from './reducers'
import rootSaga from './sagas'
import App from './App'

const sagaMiddleware = createSagaMiddleware()
const store = createStore( 
  reducer,
  applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(rootSaga)

render( 
  <Provider store={store}>
    <App /> 
  </Provider>, 
  document.getElementById("etlRootDiv"),
);

App.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

import FileExtensionSelector from './components/FileExtensionSelector'
import { setFileExtension } from './actions'

class App extends Component {
  constructor(props) {
    super(props) 
  }

  handleTypeSelect() {
    console.log('handle more click'); 
    this.props.setFileExtension('zip');
    console.log(this.props);
  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps);
  }

  render() {
    return (
      <div>
        <FileExtensionSelector onFileTypeSelect={this.handleTypeSelect.bind(this)} />
        <div>{this.props.fileType} ...asdasd</div>
      </div>
    )
  }
} 

const mapStateToProps = ({ metaState }) => {
  const { fileType } = metaState;
  return { fileType };
};

const mapDispatchToProps = (dispatch) => ({
  setFileExtension(ext) {
    dispatch(setFileExtension(ext))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(App)

reducers / index.js

import { combineReducers } from 'redux';
import metaState from './MetaStateReducer';

const rootReducer = combineReducers({
  metaState,
})

export default rootReducer

reducers / metastatereducer.js

const INITIAL_STATE = {
  fileType: null,
  hasHeader: false,
};


export default function (state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'SET_FILE_EXTENSION':
      console.log('/// in set file reducer ///');
      console.log(action);
      // console.log({ ...state, ...INITIAL_STATE, fileType: action.payload });
      return { ...state,...INITIAL_STATE, fileType: action.payload };
    default:
      return state;
  }
}

actions / metaStateActions.js

function action(type, payload = {}) {
  return { type, ...payload }
}

export const SET_FILE_EXTENSION = "SET_FILE_EXTENSION"; 
export const setFileExtension = (extension) => action( SET_FILE_EXTENSION, { payload: extension });

actions / index.js

export { setFileExtension, SET_FILE_EXTENSION } from './metaDataActions';

sagas / metastatesagas.js

import { take, put } from 'redux-saga/effects'
import { SET_FILE_EXTENSION } from '../actions';

function* watchFileExtension(ext) {
  console.log(' --- in watch file ext ---');
  const { extension } = yield take(SET_FILE_EXTENSION)
  console.log(`set extension is ${extension}`);
  // yield put({ type: 'SET_FILE_EXTENSION', payload: ext }); 
}


export const metaStateSagas = [
  take("SET_FILE_EXTENSION", watchFileExtension),
]

传奇/索引

import { all } from 'redux-saga/effects'

import { metaStateSagas } from './MetaStateSagas';

export default function* rootSaga() {
  yield all([
    ...metaStateSagas,
  ])
}

Answer 1

redux-saga始终将一个动作传递给商店，然后再尝试对其进行处理。因此，减速器将始终在执行任何传奇事件之前运行。

我认为错误是您的metaStateSagas数组需要使用takeEvery而不是take，但是我不确定。尝试一下，看看它是否可以解决问题。