React native - Redux - Не удается получить доступ к переменной состояния

Question

Ситуация

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

Следуя инструкциям, я создал следующее action:

export const SET_TOKEN = 'SET_TOKEN'

export const setToken = (token) => {
  return {
    type: SET_TOKEN,
    payload: token
  }
}

Я также создал редуктор:

export const tokenReducer = async (state={token: ''}, action) => {
  switch (action.type) {
    case SET_TOKEN:
      return {
        ...state,
        token: action.payload
      }
    default:
      return state
  }
}
const rootReducer = combineReducers({
  groups: groupsReducer,
  token: tokenReducer
});

export default rootReducer

Затем я подключаю компонент Login к хранилищу приставок:

class Login extends Component {...}

function mapStateToProps(state) {
  return {
    token: state.token
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    setToken: (token) => dispatch(setToken(token))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)

Я использую react navigation, поэтому в App.js у меня есть следующий код.

import {createStore} from 'redux';
import {Provider} from 'react-redux';
import rootReducer from "./src/store/reducers/reducers";

const store = createStore(rootReducer);
const AppContainer = createAppContainer(SwitchStack)

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <AppContainer/>
      </Provider>
    );
  }
}

Это все в соответствии с react navigation и redux документацией.

проблема

Когда я печатаю this.props в componentDidMount, я вижу ключ токена в объекте props. Проблема в том, что у этого token объекта нет строкового значения. Вместо этого я вижу Promise из tokenReducer. Все, что я пробовал до сих пор, возвращает undefined или ошибку. Когда я запускаю функцию login, действие сохраняет токен в хранилище, а затем я вижу фактическое значение в подпорках, которое имеет вид Promise {_55: {token: 'tokenValue'}}

Вопрос

Как я могу получить настоящий токен из магазина?

Answer 1

Проблема в async объявлении вашей функции tokenReducer.

Асинхронная функция в результате неявно возвращает Promise, и этот объект обещания передается в качестве реквизита для компонента реагирования (как вы заметили).Редукторы должны возвращать только новое значение состояния и не должны содержать асинхронный код.

Для решения вашей проблемы просто удалите модификатор async из функции редуктора.

export const tokenReducer = (state={token: ''}, action) => {...}