时间戳

首页 > 解决方案 > React/Redux：商店没有在从单个 onClick 事件调用的操作之间更新

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

问题描述

目标

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

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

问题

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

例子

我创建了一个 CodeSandbox，它清楚地展示了我遇到的问题。请注意，该skipAmount值100（或单击事件）在apiQuery. 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")
);

应用程序.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;
  }
};

标签： reduxreact-reduxstate

解决方案

在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 中的内容），因为道具尚未更新。

推荐阅读