情况

Question

情况

我正在尝试在我的本机应用程序中实现redux状态管理。以下示例非常简单。用户登录后，应用程序会将授权令牌保存到钥匙串/密钥库以及Redux存储中。

在教程之后，我创建了以下action：

export const SET_TOKEN = 'SET_TOKEN'

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

我还创建了reducer：

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

问题

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

Answer 1

问题出在async函数的tokenReducer声明中。

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

要解决您的问题，只需从reducer函数中删除async修饰符即可。

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

React Native-Redux-无法访问状态变量

情况

问题

问题

1 个答案: