React redux saga - 出现一些奇怪的行为

Posted 2023-03-11

【中文标题】React redux saga - 出现一些奇怪的行为

【英文标题】：React redux saga - getting some odd behaviour

【发布时间】：2019-03-12 10:36:38

【问题描述】：

我正在学习如何使用 reactjs、redux、react-redux 和 redux-saga。我在我的公共 github 存储库中对此进行了尝试，可在此处找到：

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

我的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);

我的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 );

还有我的 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"  />
          <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 );

根据我在 react devtools 中看到的：

处理请求并生成响应后的通知；生成的状态对象包含一个名为 helloWorldReducer 的字段。

这是从哪里来的？

我认为这个字段名称应该被称为 text。

附：对不起，很长的帖子；还在学习 react-redux-saga，所以我不知道我的代码的哪一部分与手头的问题相关。

【参考方案1】：

生成的状态对象包含一个名为 helloWorldReducer 的字段。

这是从哪里来的？

它来自你的根reducer，它实际上是使用combineReducers()方法创建的reducer。

这是您的 reducers/index.js 文件，它导出根 reducer 以创建 redux 存储：

import  combineReducers  from "redux";

import helloWorldReducer from "./helloWorldReducer";

export default combineReducers(
  helloWorldReducer   // here
);

【讨论】：

我明白了。如果我想返回一个更复杂的对象，而不仅仅是text（字符串值），我该怎么做呢？另外，我将如何到达我的组件上的那个对象？

那么，您的状态将被一个对象替换，而不是字符串值。您可以像以前获取字符串值一样获取该对象。

尝试将状态替换为对象，如果出现问题，我会一直在这里支持;)

感谢您的帮助。我现在对这一点有了更多的了解。得到了我现在需要的工作方式：i.imgur.com/RIYRDfj.png/我的减速器现在看起来像这样：pastebin.com/KcX6xciM/我可以在我的组件中访问复杂对象字段的值：state.helloWorldReducer.responseText