Question

我正在尝试异步操作，并尝试在不使用任何中间件的情况下处理异步操作。这是代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { connect, Provider } from 'react-redux';
import './style.css';

const countReducer = (state = { count: 0}, action) => {
  switch (action.type) {
    case 'INC': return { count: state.count + 1 };
    case 'DEC': return { count: state.count - 1 };
    default: return state;
  }
}

const reducers = combineReducers({
  counter: countReducer,
})

const actions = {
  inc: (async () => {
  return await new Promise(resolve => {
    setTimeout(() => {
      resolve({ type: 'INC' });
    }, 200)}
  );
})(),
  dec: () => ({ type: 'DEC' }),
};

const store = createStore(reducers);

class App extends Component {
  render() {
    console.log(this.props, actions);
    return (
      <div>
        <button onClick={this.props.inc}>Increment</button>
        <button onClick={this.props.dec}>Decrement</button>
        <div>Value: {this.props.count}</div>
      </div>
    );
  }
}

const mapStateToProps = ({ counter }) => {
  return { count: counter.count };
}

const AppContainer = connect(mapStateToProps, actions)(App);

render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById('root')
);

您可以运行以上代码Here。这不能按预期方式工作。单击“减量”将值减1，但单击“增量”则无任何作用。上面的代码有什么问题，我该如何解决？甚至无需使用像redux-thunk这样的中间件就可以处理异步操作吗？

Answer 1

https://reactjs.org/docs/faq-state.html，告诉我们对setState的调用是异步的，并且在调用setState之后，我们不能立即依靠this.state来反映新值。这迫使您使用setTimeout。如果不使用Redux，则可以在我提供的链接中找到该问题的解决方案。但是在使用redux的情况下，您会在https://github.com/reduxjs/redux-thunk#why-do-i-need-this中找到：

Thunks是基本Redux副作用的推荐中间件逻辑，包括需要访问存储和简单的 async 逻辑（如AJAX请求）。

这是计数器https://github.com/reduxjs/redux/tree/master/examples/counter的示例，但是您最终将要处理对API的调用和其他异步请求，因此我个人建议您使用thunk，因为它可以为您提供更好的解决方案，更优化，更快，更清洁，因为它是针对与您类似的情况而设计的，因此您无需寻找自己的解决方法。我希望这是有帮助的。

无需任何中间件即可在Redux中处理异步操作

1 个答案: