如何在React Redux中获得状态的先前值

Question

I have this 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
  }
}

but whenever I console.log the state the result is always undefined

and here is my 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,
  }
}

I'm thinking to create a constant to hold the data overall and just pass it in reducer but I don't think it's the right approach.

Question: How can I access the previous state in the reducer so that whenever I console.log there is a value.

Here is the code codesandbox

Answer 1

Previous state is stored in your state variable, as defined in your reducer. Previous state can therefore be accessed in your reducer via the state variable.

It looks like you have a block syntax error that may be causing you problems (see correction below).

Also, if you want to log previous state to the console when ever your reducer is run, consider placing the call to console.log at the beginning of your reducer:

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
  }
}