时间戳

首页 > 解决方案 > React native - Redux - 无法访问状态变量

react-native - React native - Redux - 无法访问状态变量

问题描述

情况

我正在尝试在我的本机应用程序中实现 redux 状态管理。下面的例子非常简单。当用户登录后，应用程序会将授权令牌保存到 keychain/keystore 和 redux store。

按照教程，我创建了以下内容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 组件连接到 redux 存储：

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.propsin 时componentDidMount，我可以在 props 对象中看到令牌键。问题是这个token对象没有字符串值。相反，我可以看到Promise. tokenReducer到目前为止我尝试过的任何东西，返回undefined或错误。当我触发该login功能时，该操作将令牌保存在商店中，然后我在道具中看到实际价值，其形式为Promise {_55: {token: 'tokenValue'}}

问题

如何从商店获取实际令牌？

标签： react-nativeredux

解决方案

问题在于async您的tokenReducer函数声明。

async 函数隐式返回 Promise 作为结果，并且该 promise 对象作为 prop 传递给 react 组件（如您所见）。Reducers 应该只返回一个新的状态值，并且不应该包含异步代码。

要解决您的问题，只需async从减速器功能中删除修饰符。

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

推荐阅读