Reducer doesn´t bring initialState

Question

I am using a reducer to manage a varied of states on my application. But every time I add a new key to my initial state, like this:

const initialState = {
  loading: false,
  archiveTypes: [],
  archiveType: {
    id: null,
    name: '',
    local: '',
    description: '',
  }
}

The initialState never shows the new information until I dispatch some info to the reducer.

Is there a way to make it already start with all the information?

My full code:

import * as actionTypes from 'actions';
import produce from 'immer';

const initialState = {
  loading: false,
  archiveTypes: [],
  archiveType: {
    id: null,
    name: '',
    local: '',
    description: '',
  }
}

const archiveTypeReducer = produce((draft, action) => {

  switch (action.type) {

    case actionTypes.ARCHIVE_TYPE_GET_ALL_SUCCESS: {
      draft.loading = false;
      try {
        draft.archiveTypes = action.payload
      } catch (err) {
        console.log(`REDUCER ERROR ${err}`)
      }
      return draft;
    }

    case actionTypes.ARCHIVE_TYPE_GET_BY_ID_SUCCESS: {
      draft.loading = false;
      try {
        draft.archiveType = action.payload
      } catch (err) {
        console.log(`REDUCER ERROR ${err}`)
      }
      return draft;
    }

    case actionTypes.ARCHIVE_TYPE_REQUEST_FAILURE: {
      draft = initialState
      return draft
    }

    default: {
      return draft;
    }
  }
}, initialState);

export default archiveTypeReducer;

machineghost · Accepted Answer · 2020-10-26T22:20:37.213

1

In a Redux app, your initial state is exactly that: your initial state. If you want to change your state after your page loads, you have to dispatch an action to do so.

If you want a way to completely reset your state, then you'll need to create a RESET_ALL_STATE action (or in your case, it seems your actionTypes.ARCHIVE_TYPE_REQUEST_FAILURE restores the initial state). But really that's pretty abnormal; normally you'll just want to use an ADD_SPECIFIC_DATA action.

edited Oct 26 '20 at 22:20

answered Oct 26 '20 at 22:18

machineghost

33,529
30
159
234

Yes, but I am adding fields to initalState, but they doesnt appear – Mvrocha Oct 26 '20 at 22:19
When you say "adding fields", what exactly do you mean? Like ... `initialState.foo = 1`? – machineghost Oct 26 '20 at 22:21
No it´s adding a field to initialState like this: before: `initialState={ a: [], b: [] }` after: `initialState = { a: [], b: [], c: [] }` – Mvrocha Oct 27 '20 at 16:48
So in other words, you're not doing `initialState.c = []`, you're changing the Javascript code and refreshing the page? In that case **NOTHING** should be sticking around from the previous version of `initialState`. When a browser refreshes, it should start with a completely clean `initialState`, based on the latest version of your file. The only way the old version could stick around (that I could think of) is if you have some sort of caching issue with Create React App/Webpack, and it's not clearing out the old files when it generates new ones. – machineghost Oct 27 '20 at 18:59
Maybe that´s the problem. Do you know how can I check that? And to get the new initial state, isnt possible that i should make a dispatch request? – Mvrocha Oct 27 '20 at 19:27
For the caching stuff, see https://stackoverflow.com/questions/49604821/cache-busting-with-cra-react. But for your initial data you *do not* want to make a dispatch. Dispatch is for dispatching *actions*, which is how you *change* existing store data. Initial data is something separate; it's not something you set with an action, it's just how your store starts out, and you pass it directly when you make that store. – machineghost Oct 27 '20 at 19:30
All right, I´ll talke a look at it! Thanks for your help!! – Mvrocha Oct 27 '20 at 19:37

score 0 · Answer 2 · answered Oct 26 '20 at 22:07

0

For example, you can call action in method of component live circle, like componentDidMount. Or react hooks, useEffect https://reactjs.org/docs/react-component.html#componentdidmount

answered Oct 26 '20 at 22:07

Piter

96
3

Call a dispatch? – Mvrocha Oct 26 '20 at 22:18
Yes. For example you have mapDispatchToProps like that: setFoo: dispatch({ type: 'SET_FOO' }). And if you use class component, put setFoo() into the componentDidMount. It will call your action when componen did mount, it means whet component shows in view screen. – Piter Oct 27 '20 at 07:20
Yes, in some pages I use these technique, but I need to get the initial state without a dispatch. Just using the reducer, it´s that possible? – Mvrocha Oct 27 '20 at 16:51

score 0 · Answer 3 · answered Oct 27 '20 at 07:25

0

And one thing, you forgot set initiasState as default state(draft). produce((draft = initialState, action).

answered Oct 27 '20 at 07:25

Piter

96
3

Reducer doesn´t bring initialState

3 Answers3