React/Redux：商店没有在从单个 onClick 事件调用的操作之间更新

Question

目标

点击next按钮并向redux store发送两个动作：

1. 首先，更新skipAmount 值。
2. 然后使用更新后的skipAmount 值生成apiQuery（用于向服务器发出请求的字符串）。

问题

skipAmount 值未在操作 1 和 2 之间更新

示例

我创建了一个 CodeSandbox，它清楚地展示了我遇到的问题。请注意，skipAmount 的值在apiQuery 之前是100（或单击事件）。 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' 中，您正在更改 redux 状态。 （不是组件中的当前道具），

并且在'SET_API_QUERY' 中，您正在使用组件道具（不是redux 中的内容），因为道具尚未更新。