Невозможно получить состояние от mapStateToProps (не определено)

Question

Я могу изменить хранилище и состояние из моего компонента, но не могу получить к нему доступ.

Я новичок в программировании и у меня проблема с React + Redux.В моем приложении есть несколько страниц, связанных с реагирующим маршрутизатором, и я использую Redux для сохранения входных данных из полей формы.

const insuranceReducer = (state = {
    productName: ""
}, action) => {
    switch(action.type) {
        case "UPDATE_FORM":
            if(action.payload.productName){
                state = {
                    ...state,
                    productName: action.payload.productName
                }
            } 
        return state;
    } }

Хранилище создано с помощью

const store = createStore(insuranceReducer, applyMiddleware(myLogger));

store.subscribe(() => {
    console.log("store updated", store.getState());
})

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'));

И я могу изменить его с помощью отправки от компонента с этим кодом

const mapDispatchToProps = (dispatch) => {
    return {
        handleChange: (event) => {
            dispatch({
                type:"UPDATE_FORM",
                payload: {[event.target.name]: event.target.value}
            })
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(FormComp);

Это работает !!!У меня есть onChange для полей ввода и Middleware в консоли магазина регистрирует изменения.Все хорошо, пока я не попробую использовать mapStateToProps.Это дает мне неопределенный для государства.Я пытаюсь получить к нему доступ с помощью этого

const mapStateToProps = state => {
    console.log(state);
    return {        
        name: state.productName,
    }
}

. Выдает сообщение об ошибке "Не удается прочитать свойство productName of undefined", а журнал консоли для состояния не определен.Пожалуйста, дайте мне несколько идей о том, почему это не работает.У меня есть почти такая же настройка для другого проекта, и она работает.Может ли он быть подключен к React Router, потому что я не использую его в другом проекте?Отправка действий в магазин работает и изменяет состояние, но я не могу получить к нему доступ.Извините, если сообщение не очень информативно, я до сих пор не привыкла публиковать вопросы.

Answer 1

В вашем редукторе вы делаете мутацию состояния в блоке if. Вы хотите избежать непосредственного обновления существующего объекта состояния. Это противоречит принципам Redux. Вместо этого вы должны создать совершенно новое состояние, подобное этому.

const initialState = { productName: "" };

const insuranceReducer = (state = initialState, action) => {
  switch (action.type) {
    case "UPDATE_FORM":
      if (action.payload.productName) {
        return {
          ...state,
          productName: action.payload.productName
        };
      }
      return { ...state };
    default:
      return state;
  }
};

export default insuranceReducer;

Чтобы ваш подключенный компонент корректно обновлялся с новыми реквизитами, Redux должен знать, что вы возвращаете совершенно новое состояние. Если вы изменяете состояние, вы на самом деле обновляете тот же объект, на который ссылаетесь, и на Redux, который не регистрируется как обновление допустимого состояния.

Кроме того, похоже, что вы никогда не возвращали состояние по умолчанию для вашего редуктора. Если состояние не возвращается, то при попытке доступа к нему в mapStateToProps() ваш редуктор просто вернет undefined.

См. Рабочую песочницу: https://codesandbox.io/s/async-snowflake-tnv0e