Как асинхронно получить данные из reudx?

Question

[Hlib]

У нас в state redux'а имеется поле authorisation с данными success, после нажатия кнопки, бэкэнд в зависимости от введенных данных, пришлет success: true или success:false
Дело в том, что когда я записываю в connect state переменную, которую беру из reudx, она не обновляется, когда обновляются данные в redux.
Можно ли как-то забрать данные из redux экшоном или другим способом?

Comments

[Антон Спирин]

Код в студию.

[Hlib]

Антон Спирин, Не знаю что именно прислать, я думал тут будет общий совет
Это моя попытка получить ключ (думал что при обновлении данных редакс, обновится и переменная success

export default connect(
  state =>({
    success: state.key
  }),

Это ответ, который передается после отправки логина с паролем на сервер, в данном случае такой пользователь существует

Не думаю, что это пригодится, но лучше скину лишнего, на всякий случай
Это экшен, который как раз и отправляет данные на сервер и ловит ответ

export function fetchSuccess(key){
  return {
    type: 'LOGIN_USER_SUCCESS',
    key
  }
}

export function authorisation(url, data){
  return (dispatch) => {
    return fetch(url, {
      method: 'POST',
      body: JSON.stringify(data),
      headers: new Headers({
        'Content-Type': 'application/json'
      }),
    })
    .then(response =>{
      if(!response.ok){
        throw new Error(response.statusText)
      }
      return response;
    })
    .then(response => response.json())
    .then(data => dispatch(fetchSuccess(data)))
  }
}

[Антон Спирин]

Hlib, а как выглядит редьюсер и какая у вас структура хранилища?

[Hlib]

Антон Спирин,
Вот редьюсер:

export default function authorisation(state = {key: false}, action){
  switch (action.type) {
    case 'LOGIN_USER_SUCCESS':
      return action.key
      break;
    default:
      return state;
  }
}

Вот так выглядит хранилище (много лишних данных, потому что в основном тестировал систему на заранее внесенных данных)

[Антон Спирин]

Hlib, добавил ответ.

[Hlib]

Антон Спирин, да, точно, state.authoriZation.success сработало, спасибо

Answer 1

[Антон Спирин]

1. В экшене меняем строку:

.then(data => dispatch(fetchSuccess(data.success)))

2. В редьюсере:

case 'LOGIN_USER_SUCCESS':
  return {
    ...state,
    key: action.key, 
  };

3. connect:

const mapStateToProps = state => ({
  success: state.authorisation.key,
});

export default connect(mapStateToProps)(YourComponent);

По-хорошему исправить:
authorisation ----> authorization

Answer 2

[Владимир]

Кажетс вам нужно посмотреть на https://github.com/reduxjs/redux-thunk