Question

我是一名Vue开发人员，试图与React Native和Redux接触-我对Vuex十分精通，但是我仍在努力了解Redux的结构。

据控制台日志显示，我已经正确设置了操作/存储。

我试图通过onPress获取一个按钮来设置商店中的状态。这是按钮：

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

function mapDispatchToProps(dispatch) {  
  return {
      address: (value) => dispatch({ 
        type: 'UPDATE_ADDRESS',
        placeName: value })
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)

还有我的按钮/文字来更改信息并显示信息

      <Button
        title="set address"
        onPress={() => this.props.address('new address')}
      />
      <Text>{store.getState().placeName}</Text>

reducer文件如下：

const addressReducer = (state = initialState, action) => {
  console.log("in here");

  switch(action.type) {
    case UPDATE_ADDRESS:
      return {
        ...state,
        placeName: action.payload
      };
    default:
      return state;
  }
}

但是当我console.log out action.payload时，它是未定义的。

您不能像这样将值传递给商店吗？当我单击按钮时，<Text>{store.getState().placeName}</Text>不会更新，它只会显示“ Hello world”。

Answer 1

您的代码几乎是正确的-只需进行一些调整即可使其完全通过。

首先，您的UPDATE_ADDRESS动作是通过placeName而不是payload将“值”传递给减速器。在减速器中，进行以下更改以确保您正在访问placeName（而不是payload，它将是未定义的）：

case UPDATE_ADDRESS:
      return {
        ...state,
        /* placeName was defined in your action creator */
        placeName: action.placeName 
      };

最后，要确保在发生商店更改时（即，在化简器执行UPDATE_ADDRESS操作之后）呈现UI，您需要像这样更新render()方法：

  <Button
    title="set address"
    onPress={() => this.props.address('new address')}
  />
  { /* Render placeName via prop provided by mapStateToProps */ }
  <Text>{ this.props.placeName }</Text>

当您的placeName组件“连接”到商店时，mapStateToProps()道具是由您的<Home />函数定义/提供的。

查看mapStateToProps()的方式是将<Home />组件感兴趣的状态位（即从您的全局商店）映射到传递给{{1 }} 零件。

这就是为什么您可以然后从<Home />组件渲染方法中通过placeName访问this.props的原因-

希望这会有所帮助！

如何通过onPress将新值传递给Redux存储？

1 个答案: