javascript - 如何在 React Redux 中获取状态的先前值

Question

我有这个reducer

import { FETCH_WEATHER } from "../actions/index";

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_WEATHER:
      console.log(state)
      return [action.payload.data,...state];
    default:
      return state
  }
}

但每当我控制台记录 state 结果总是 undefined

这是我的action

import axios from 'axios';

const API_KEY = '...';
const ROOT_URL = `...`
export const FETCH_WEATHER = 'FETCH_WEATHER';

export function fetchWeather(city){
  const url = `${ROOT_URL}&q=${city},us`;
  const request = axios.get(url)
  return {
    type : FETCH_WEATHER,
    payload: request,
  }
}

我正在考虑创建一个常量来保存整体数据并将其传递给 reducer，但我认为这不是正确的方法。

问题:我如何访问 reducer 中的先前状态，以便每当我 console.log 时都有一个值。

这是代码 codesandbox

Answer 1

先前的状态存储在您的 state 变量中，如您的 reducer 中所定义。因此，可以通过 state 变量在您的 reducer 中访问以前的状态。

看起来您有可能导致问题的 block 语法错误(请参阅下面的更正)。

此外，如果您想在 reducer 运行时将之前的状态记录到控制台，请考虑在 reducer 的开头调用 console.log:

import { FETCH_WEATHER } from "../actions/index";

export default function(state = [], action) {

  // console.log(state) // Add this to log previous state for every call to reducer

  switch (action.type) {

    case FETCH_WEATHER: { // Added { here

      console.log(state)
      return [action.payload.data,...state];

    } // Added } here

    default:
      return state
  }
}