react/redux:store未在从单个onclick事件调用的操作之间更新

目标

单击 next 按钮并向redux存储区发送两个操作:

1. 首先,更新 skipAmount 价值。
2. 然后使用更新的 滑雪板 要生成的值 apiQuery (用于向服务器发出请求的字符串)。

问题

这个 滑雪板 在操作1和2之间未更新值

例子

我已经创建了一个代码沙盒,可以清楚地演示我遇到的问题。请注意 滑雪板 价值是 100 (或单击事件)在 阿皮奎尔 . https://codesandbox.io/s/o2vvpwqo9

代码

索引.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);

异径管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;
  }
};