简体   繁体   中英

Setting redux state doesn't work after a hard refresh

I am setting my redux state through a value I have in localStorage. This works fine when I navigate into my page. However, when I do a hard refresh the state is never set, despite the value in localStorage being passed down.

This is what my code looks like:

class SomeComponent {
  componentWillMount() {
    if (typeof localStorage !== 'undefined') {
      console.log('I get to here...', localStorage.getItem('someValue')) // this comes in as expected always
      this.props.setMyReduxState(localStorage.getItem('someValue'))
    }
  }

  render () {
    // will have the value of the localStorage item someValue when navigated into the page
    // will be an empty string if I do a hard refresh
    console.log('this.props.myReduxState', this.props.myReduxState)
    return (
      <div>
        Stuff...
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    myReduxState: state.something.myReduxState || ''
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    setMyReduxState (someValue) {
      dispatch(setMyReduxState(someValue))
    }
  }
}

Any ideas?

Edit: just a small addition to simplify the problem: I also tried it sending a string directly to setMyReduxState function, without the localStorage, the state still isn't being set. So basically something like this:

componentWillMount() {
          this.props.setMyReduxState('some string!')
      }

From my understanding every time the redux state is set, the component should re-draw, which isn't happening when there is a hard refresh. Are there any reasons for this or something being done incorrectly?

Edit2: Including my action creator and reducer in case needed:

const SET_MY_REDUX_STRING = 'admin/users/SET_MY_REDUX_STRING'


const defaultState = {
  myReduxState: ''
}

export function setMyReduxState (value) {
  return {
    type: SET_MY_REDUX_STRING,
    myReduxState: value
  }
}

export default function reducer (state = defaultState, action = {}) {
  switch (action.type) {
    case SET_MY_REDUX_STRING:
      return Object.assign({}, state, { myReduxState: action.myReduxState })
    default:
      return state
  }

}

Some of the checklist you need to follow while using redux -

  1. Are you dispatching an action creator that returns an object with 'type' and data? Here 'type' is mandatory.
  2. Does your reducer return the state with the updated data that it received?
  3. Make sure you do not mutate the state in reducer. Always use {...state, someKey: someValue}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM