Redux Thunk молча не удается обновить состояние - PullRequest
Новая
       5

Redux Thunk молча не удается обновить состояние

0 голосов
/ 06 декабря 2018

Дочерний компонент имеет следующий код кнопки: 

// SelectDonation.js
          <button
            onClick={(e) => {
              e.preventDefault();
              this.props.testThunk();
              console.log(store.getState());
            }}
          >Test thunks</button>

this.props.testThunk() не обновляет объект состояния.Я подключил Redux Thunk так: 

// reducer.js
import ReduxThunk from "redux-thunk";

const starting_state = {
  log_to_console : 0,
  donation_amount : 12,
  checkoutStep : 'selectDonation',
};

const reducer = (previous_state = starting_state, action) => {
  switch (action.type) {
    case 'thunkTest':
      return {
        ...previous_state,
        redux_thunk_test_var : action.payload
      };
    default:
      return previous_state;
  }
};

export default createStore(reducer, starting_state, applyMiddleware(ReduxThunk));

Я ожидаю, что новое свойство состояния redux_thunk_test_var будет отображаться в состоянии, но оно не будет включено.Я вижу переменные состояния с начальными состояниями в консоли.

Правильно ли я передаю thunk?Вот App.js 

// App.js
          {this.props.checkoutStep === checkoutSteps.selectDonation &&
           <SelectDonation
            dispatch_set_donation_amount = {this.props.dispatch_set_donation_amount}
            dispatchChangeCheckoutStep={this.props.dispatchChangeCheckoutStep}
             {...this.props}
           />
          }         
          </Modal>
        </header>
      </div>
    );
  }
}

const map_state_to_props = (state) => {
  return {
    log_prop : state.log_to_console,
    donation_amount : state.donation_amount,
    checkoutStep : state.checkoutStep,
  }
};

const map_dispatch_to_props = (dispatch, own_props) => {
  return {
    dispatch_set_donation_amount : amount => dispatch(set_donation_amount(amount)),
    dispatchChangeCheckoutStep : newStep => dispatch(changeCheckoutStep(newStep)),
    dispatchUpdateStateData : (stateData, stateVariable) => (dispatch(updateStateData(stateData, stateVariable))),
    testThunk
  }
};

Действие Thunk: 

// actions.js
export const testThunk = () => {
    const testDelay = setTimeout(() => 'Set Timeout done', 2000);
  return (dispatch) => {
    testDelay.then((data) => dispatch({
      type: 'thunkTest',
      payload: data })
    )
  }
};

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018 
conponentDidMount() {
  this.props.testThunk();
}

const map_dispatch_props = {
  testThunk
}


//action creator 

const fetch = (data) => ({
  type: 'thunkTest',
  payload: data
})


const fakeFetch = () => new Promise((resolve, reject) => setTimeout(() => resolve('Set Timeout done'), 2000));

export const testThunk = () => (dispatch) => fakeFetch.then(data => dispatch(fetch(data)))
0 голосов
/ 06 декабря 2018

Вам необходимо отправить результат действия создателя действия testThunk().Прямо сейчас вы просто возвращаете его, а не вызываете dispatch(testThunk()).

См. эту суть, сравнивающую синтаксисы для отправки , чтобы помочь лучше понять проблему.

Лучший способ исправить это - использовать форму "Сокращения объектов" mapDispatch.В качестве части этого я предлагаю изменить имена реквизитов, чтобы удалить слово «dispatch», что позволяет использовать более простой синтаксис литералов объекта ES6: 

const map_dispatch_to_props = {
    set_donation_amount,
    changeCheckoutStep,
    updateStateData,
    testThunk,
};
...