Почему Redux не выполняет рендеринг компонента?

Question

У меня есть компонент с методом componentDidMount(), который получает информацию с сервера следующим образом:

componentDidMount() {
    this.getAccount();
}

getAccount = async () => {
    try {
        this.res = await API.get(`account`, {});
        this.props.setData(this.res.data);
    } catch (err) {
        this.props.history.push(`/add`);
    }
}

И у меня есть редуктор, который хранит информацию:

const initialState = {}

const accountReducer = (state = initialState, action) => {
    if (action.type === 'SET_ACCOUNT_DATA') {
        return action.data;
    } else {
        return state;
    }
}

export default accountReducer;

Но мойкомпонент не рендерится после выполненного действия.Зачем?Мой код действия:

export const setData = (data) => {
    return {
        type: 'SET_ACCOUNT_DATA',
        data
    }
}

Пожалуйста, помогите, что я делаю не так?

ОБНОВЛЕНИЕ: Мои методы карты:

const mapStateToProps = (state) => ({

})

const mapDispatchToProps = (dispatch) => {
    return {
        setData: (data) => {
            return dispatch(setData(data));
        }
    }
}

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

Му действие import правильно.Проверено.

Answer 1

вы проверили, установив console.log ('state :::', state);внутри mapStateToProps ()?Это называется снова?также вы можете попробовать это

const accountReducer = (state = initialState, action) => {
    if (action.type === 'SET_ACCOUNT_DATA') {
        return Object.assign({}, state, {...state, data:action.data });
    } else {
        return state;
    }
}

и в вашем mapStateToProps

const mapStateToProps = (state)=>({
  data: state.reducername.data
})

Answer 2

1. В вашем редукторе вы, вероятно, хотите скопировать исходное состояние и добавить в него свои изменения, поэтому я думаю, что ваш редуктор должен выглядеть примерно так:

   const accountReducer = (state = initialState, action) => {
     if (action.type === 'SET_ACCOUNT_DATA') {
       return {...state, data: action.data};
     } else {
       return state;
     }
   }
   

2. Если ваш компонент имеет mapStateToProps(), который возвращает пустой объект, то компонент не будет повторно визуализироваться, если нет изменений реквизита / состояния ... Ваш mapStateToProps() метод может выглядеть следующим образом:

   const mapStateToProps = state => ({
     data: state.yourReducer.yourDataFromStore
   })