Search code examples
reactjsreduxredux-thunk

React redux is not updating components


React app doesn't update components after reducing new state. After first render, no matter what actions i do, there is no updates in react components. I tried to find some state mutation in reducers, but there are none. I have no idea what is a problem.

Here is repo: https://github.com/ithrasil/rainbeat/tree/bug

I would appreciate any help

one of reducers:

export default function(
state={ 
    received: false,
    status: false, 
  primaryList: [], 
  secondaryList: [], 
  query: "" 
}, 
action) {

switch(action.type) {

case "RECEIVE_STATUS":
  state.received = action.payload;
  break;

    case "SEARCH_STATUS":
        state.status = action.payload;
        break;

    case "PRIMARY_LIST_UPDATE":
        state.primaryList = action.payload;
        break;

    case "SECONDARY_LIST_UPDATE":
        state.secondaryList = action.payload;
        break;

    case "QUERY_UPDATE":
        state.query = action.payload;
        localStorage.setItem('query', action.payload);
        break;
    }

    return state;
}

One of containers https://github.com/ithrasil/rainbeat/blob/bug/src/containers/left/search.jsx


Solution

  • You are mutating the state. That is why your components are not rendering

    export default function(state={ id: 0 }, action) {
     var newState; 
       switch(action.type) {
            case "CHANGE_CARD":
              newState={...state, id: action.payload}
              break;
          }
    
          return newState;
        }