React / Redux: хранилище не обновляется между действиями, вызванными из одного события onClick

Question

Цель

Чтобы нажать кнопку next и отправить два действия в хранилище редуксов, которые:

1. Сначала обновите значение skipAmount.
2. И затем используйте обновленное значение skipAmount для генерации apiQuery (строка, используемая для отправки запроса на сервер).

Проблема

skipAmount значение не обновляется между действиями 1 и 2

Пример

Я создал CodeSandbox, который ясно показывает проблему, с которой я столкнулся.Обратите внимание, что значение skipAmount на 100 (или одно нажатие) опережает apiQuery.https://codesandbox.io/s/o2vvpwqo9

Код

Index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";

import App from "./App";
import reducer from "./reducer";

const store = createStore(reducer);

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

App.js

import React from 'react';
import { connect } from 'react-redux';

const mapStateToProps = state => ({
  ...state,
});

const queryGenerator = props => `www.apiExample.com?skipAmount=${props.skipAmount}`;

const ConnectedApp = props => (
  <div className="App">
    <button
      onClick={() => {
        props.dispatch({ type: 'SET_SKIP_AMOUNT_PLUS_100' });
        props.dispatch({ type: 'SET_API_QUERY', payload: queryGenerator(props) });
      }
      }
    >
      Next
    </button>
    <p>Skip amount on redux: {props.skipAmount}</p>
    <p>Query being generated: {props.apiQuery}</p>
  </div>
);

export default connect(mapStateToProps)(ConnectedApp);

reducer.js

const reducerDefaultState = {
  skipAmount: 0,
  apiQuery: 'www.apiExample.com',
};

export default (state = reducerDefaultState, action) => {
  switch (action.type) {
    case 'SET_SKIP_AMOUNT_PLUS_100':
      return {
        ...state,
        skipAmount: state.skipAmount + 100,
      };
    case 'SET_API_QUERY':
      return {
        ...state,
        apiQuery: action.payload,

      };
    default:
      return state;
  }
};

Answer 1

В App.js queryGenerator(props) вы передаете неизмененные реквизиты из onClick.

реквизиты не меняются с SET_SKIP_AMOUNT_PLUS_100 до повторного рендеринга.

onClick={() => {
        props.dispatch({ type: 'SET_SKIP_AMOUNT_PLUS_100' });
        props.dispatch({ type: 'SET_API_QUERY', payload: queryGenerator(props) });
      }

В 'SET_SKIP_AMOUNT_PLUS_100' вы меняете состояние редукции.(не текущие реквизиты в компоненте),

и в 'SET_API_QUERY' вы используете реквизиты компонентов (не то, что в редуксе), потому что реквизиты еще не обновлены.