Компонент не обновляется после изменения состояния в редукторе - PullRequest
Новая
       41

Компонент не обновляется после изменения состояния в редукторе

0 голосов
/ 14 ноября 2018

Я хотел бы показать ошибку своему пользователю. Выдается ошибка, и ошибка и сообщение обновляются в редукторе действием. Но по какой-то причине я не могу получить сообщение об ошибке или сообщение для пользователя. Что-то не так с редуктором или mapStateToProps? Как компонент узнает, что состояние обновлено? Я не уверен, как обновить это .....

Что мне не хватает?

Редуктор: 

import {CREATE_VEHICLE,VEHICLE_ERROR, 
VEHICLE_FORM_PAGE_SUBMIT,FETCH_VEHICLES_SUCCESS} from '../actions/vehicles';

const initialState={message: null, error: null, vehicle:{}};

 export default function vehicleReducer(state=initialState, action) {
console.log("in reducer");
switch(action.type){
case CREATE_VEHICLE:
    return [...state, Object.assign({}, action.vehicle, action.message)];
case VEHICLE_ERROR:
    return{
    ...state,
        error: action.error,
        message: action.message
    };
    default:
        return state;
}
}

действия: 

export const vehicleError = (error, msg) => {
return{
type: VEHICLE_ERROR,
error:error,
message: msg
}

};

export const createVehicle=(vehicle) =>{
console.log("vehicle: ", vehicle);

return (dispatch) => {
    return axios.post(`http://localhost:9081/api/bmwvehicle/create`, 
vehicle)

    .then((response) =>{
        if (response.ok){
            console.log("success");
             dispatch(createVehicleSuccess(response.data))

        }}, (error) => {
                if (error.response.status == 500){
                dispatch(vehicleError(error.message, "Could not add vehicle, 
please try again."));

            }

        }
    );
};};

компонент: 

class Vehicle extends React.Component{
 constructor(props){
        super(props);
      }


      submitVehicle(input){
        this.props.createVehicle(input);
        }

      render(){
          console.log("the error is: ",this.props.error);
            return(
                    <div>
                        <AddVehicle submitVehicle= 
{this.submitVehicle.bind(this)} /> 
                    </div>

                )
      }
}

      const mapStateToProps=(state, ownProps) => {
          return{
              vehicle: state.vehicle,
              message: state.message,
              items: state.items,
              vehicles: state.vehicles,
              error: state.error
          }
      };

      const mapDispatchToProps=(dispatch)=>{
          return {
              createVehicle: vehicle => 
dispatch(vehicleActions.createVehicle(vehicle))
          }
      };


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

1 Ответ

0 голосов
/ 15 ноября 2018

В вашем действии CREATE_VEHICLE, я думаю, вы хотели вместо этого вернуть состояние с помощью фигурных скобок? {...state, Object.assign({}, action.vehicle, action.message)}

В вашем mapStateToProps вы пытаетесь получить доступ к state.vehicles и state.items, но он не существует в исходном состоянии по умолчанию const initialState={message: null, error: null, vehicle:{}}.

Чтобы ответить на ваш вопрос о том, как компонент знает, что состояние (redux) было обновлено, компонент знает, потому что вы обернули его в Redux HoC, называемый connect (), который будет уведомлять ваш компонент через обновление каждый раз, когда сопоставленное состояние избыточности изменения. В вашем случае, компонент будет обновляться при изменениях в state.vehicle, state.message, state.items, state.vehicles и state.error хранилища избыточности.

...