Реагируй на саксофон - получи странное поведение

Question

Я нахожусь в процессе изучения того, как использовать реактив, редукс, реакт-редукс и редукс-сагу.Моя попытка сделать это в моем публичном репозитории github, найдена здесь:

https://github.com/latheesan-k/react-redux-saga/tree/5cede54a4154740406c132c94684aae1d07538b0

My store.js :

import { compose, createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";

import reducer from "./reducers";
import mySaga from "./sagas";

const sagaMiddleware = createSagaMiddleware();

const composeEnhancers =
  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // TODO: Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const storeEnhancer = composeEnhancers(applyMiddleware(sagaMiddleware));

export default createStore(reducer, storeEnhancer);

sagaMiddleware.run(mySaga);

my actions.js

export const HELLO_WORLD_REQUEST = "HELLO_WORLD_REQUEST";
export const HELLO_WORLD_RESPONSE = "HELLO_WORLD_RESPONSE";
export const HELLO_WORLD_ERROR = "HELLO_WORLD_ERROR";

export const helloWorldRequest = () => ({ type: HELLO_WORLD_REQUEST });
export const helloWorldResponse = text => ({ type: HELLO_WORLD_RESPONSE, text });
export const helloWorldError = error => ({ type: HELLO_WORLD_ERROR, error });

и my sagas.js

import { put, takeLatest } from "redux-saga/effects";

import { HELLO_WORLD_REQUEST, helloWorldResponse, helloWorldError } from "./actions";

function* runHelloWorldRequest(action) {
  try {
    // TODO: real api call here
    yield put(helloWorldResponse("Hello from react-redux-saga :)"));
  } catch (e) {
    yield put(helloWorldError(e));
  }
}

export default function* mySaga() {
  yield takeLatest(HELLO_WORLD_REQUEST, runHelloWorldRequest);
}

и мой helloWorldReducer.js

import { HELLO_WORLD_RESPONSE } from "../actions";

export default (state = "", { type, text }) => {
  switch (type) {
    case HELLO_WORLD_RESPONSE:
      return text;

    default:
      return state;
  }
};

и вот как все это собрано на моем App компоненте:

class App extends Component {
  componentDidMount() {
    this.props.helloWorldRequest();
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>{this.props.responseText}</p>
        </header>
      </div>
    );
  }
}

const mapStateToProps = state => ({ responseText: state.helloWorldReducer });
const mapDispatchToProps = dispatch => bindActionCreators({ helloWorldRequest }, dispatch);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Это отлично работает, но вот странное поведение, которое я пытаюсьПонимаю.Чтобы вывести значение ответа из состояния и отобразить его в подпорках, мне нужно было сделать следующее:

const mapStateToProps = state => ({responseText: state.helloWorldReducer});

На основании того, что я увидел в реагирующих devtools:

Уведомление после обработки запроса и генерации ответа;результирующий объект состояния содержит поле с именем helloWorldReducer.

Откуда это взялось?

Я предположил, что это имя поля должно было называться text.

PS Извините за длинный пост;Я все еще учусь реагировать на саги, так что я не знал, какая часть моего кода была актуальна для рассматриваемого вопроса.

Answer 1

результирующий объект состояния содержит поле с именем helloWorldReducer.

Откуда это взялось?

Он исходит от вашего корневого редуктора, который на самом деле является редуктором, созданнымиспользуя метод combineReducers().

Это ваш файл reducers/index.js, который экспортирует корневой редуктор для создания хранилища редуксов:

import { combineReducers } from "redux";

import helloWorldReducer from "./helloWorldReducer";

export default combineReducers({
  helloWorldReducer   // here
});