Trouble Updating State with React-Redux

Question

This is App.js

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <Route exact path ="/" component={AuthPage} />
          <Route exact path ="/login" component={AuthPage} />
          <Route exact path ="/register" component={AuthPage} />
          <Route exact path ="/homepage" component={Homepage} />
          <Route exact path ="/notloggedin" component={NotLoggedIn} />
        </Router>
      </Provider>
    );
  }
}

export default App;

This is my action

import jwt_decode from 'jwt-decode'
import { SET_CURRENT_USER } from './types';

export const checkUser = user => (dispatch) => {
    fetch('/login', {
        method: 'POST',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify(user)
      })
        .then(res => res.json())
        .then((json) => {
          if (json.status === 200) {
              localStorage.setItem("jwt", json.jwt);
              const { jwt } = json
              const { user_name } = jwt_decode(jwt);
              dispatch({
                    type: SET_CURRENT_USER,
                    payload: user_name
                })
              window.location = '/homepage' 
          } else {
              alert(json.message)
          }    
      });
  };

Here is my reducer

import { SET_CURRENT_USER } from '../actions/types'

const initialState = {
    user: ''
};

export default function (state = initialState, action) {
    switch (action.type) {
        case SET_CURRENT_USER:
            return {
                user: action.payload,
            }
        default:
            return state
    }
}

I can set an alert inside of the reduction to show action.payload and it appears alert

But Redux Dev Tools show no update to state redux dev tools

Why isn't state being updated?

I don't see why your state would update because it's not executing that part of the code. I think json.status === 200 is never going to be true because your json response will be a string not a number. Does it work if you either change it to compare against a string or just remove the condition entirely? — jmargolisvt
That part is working and dispatch is getting triggered. I'm sending a status code with the data from my API. — MikeBarberry
How are you setting up the store? Are you using combineReducers or just passing it the user reducer only. In your image of dev tools it shows currentUser as the parent structure of user. — Steve K
I'm using combineReducers but I actually only have one. It's defined in reducers/index.js and the store brings it in as rootReducer — MikeBarberry
You probably need to combine the rest of the state when you return in your reducer try return {...state, user: action.payload} and see what you get. — Steve K

MikeBarberry MikeBarberry · Accepted Answer · 2021-04-14T05:32:49

The redux dev tools are the problem themself.

They're unpredictable and don't show state effectively.

Better to render to the UI.

Trouble Updating State with React-Redux

1 Answers