React / Redux：存储不会在单个onClick事件调用的操作之间进行更新

Question

目标

单击next按钮并将两个操作分派给redux商店：

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

问题

行动1＆amp;之间未更新skipAmount值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 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'中，您正在更改redux状态。 （不是组件中的当前道具），

并且在{{ page.go_live_at }}你正在使用组件道具（而不是redux中的内容），因为道具还没有更新。