I
I
inctnce2020-08-16 19:49:37
JavaScript
inctnce, 2020-08-16 19:49:37

Why is the component not updated when the state changes in the redux reducer?

Here is the reducer:

function accountReducer(state: StateT = initialState, action: ActionI): StateT {
  let newState: StateT = JSON.parse(JSON.stringify(state));

  switch (action.type) {
    case ADD_CATEGORY:
      addCategory(state, action.category);
      break;

    case UPD_CATEGORY_FIELD_TITLE:
      newState = {...state};
      
      newState.category_value = action.title;
      console.log(newState.category_value);
      console.log(state.category_value);

      console.log(newState === state);
      break;

    case ADD_PRODUCT:
      addProduct(state, action.product);
      break;

    case UPD_PRODUCT_FIELD_TITLE:
      updProductFormTitle(state, action.title, action.index);
      break;

    case UPD_NUM_OF_TEXT_FIELDS:
      updNumOfTextFields(state, action.index);
      break;

    case UPD_PERSONAL_DATA_FORM_TITLE:
      updPersonalDataFormTitle(state, action.title, action.index);
      break;

    default:
      return state;
  }
  console.log(newState === state);
  return newState;
}

I get state, copy it to newStateand, depending on the type of action, change something in it. But nothing gets redrawn
Here is connect:
function mapStateToProps(
  state: CombinedState<{
    accountPage: StateT;
    catalogPage: StateT;
  }>
) {
  return {
    CategoryForm: state.accountPage
  };
}

function mapDispatchToProps(dispatch: (action: ActionI) => void) {
  return {
    addCategory: (newCategory: string) => {
      dispatch(addCategoryActionCreator(newCategory));
    },
    updCategoryTitle: (newCategory: string) => {
      dispatch(updCategoryFormTitleActionCreator(newCategory))
    },
  };
}

const CategoryFormContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(CategoryForm);

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander, 2020-08-17
@inctnce

case ADD_CATEGORY:
    addCategory(
-       state,
+       newState,
        action.category
    );
    break;

And in other similar places too. By the way, you can copy and so let newState = { ...state };.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question