Обработка асинхронных действий в Redux без промежуточного ПО

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')
);

Вы можете запустить код выше Здесь . Это не работает, как ожидалось. Нажатие на «Уменьшение» уменьшает значение на 1, но нажатие на «Увеличение» ничего не делает. Что не так в приведенном выше коде и как я могу это исправить? Возможно ли вообще обрабатывать асинхронные действия без использования промежуточного программного обеспечения, такого как redux-thunk?

Answer 1

https://reactjs.org/docs/faq-state.html, говорит нам, что вызовы setState являются асинхронными и что мы не должны полагаться на this.state, чтобы отобразить новое значение сразу после вызова setState. Что заставляет вас использовать setTimeout. Без использования Redux вы можете найти решение этой проблемы по ссылке, которую я предоставил. Но в вашем случае, когда вы используете избыточность, вы найдете в https://github.com/reduxjs/redux-thunk#why-do-i-need-this:

Thunks - рекомендуемое промежуточное ПО для основных побочных эффектов Redux логика, включая сложную синхронную логику, которая требует доступа к хранение и простая асинхронная логика, подобная AJAX-запросам.

Это пример счетчика https://github.com/reduxjs/redux/tree/master/examples/counter, но в конечном итоге вы будете иметь дело с вызовами API и другими асинхронными запросами, поэтому я лично предлагаю вам использовать thunk, поскольку он дает вам лучшее решение, более оптимизированное , быстрее и чище, так как это было сделано для ситуаций, похожих на вашу, поэтому вам не нужно искать собственный обходной путь. Я надеюсь, что это полезно.