Javascript 使用mapDispatchToProps更改为状态的新值 Profile.js

Profile屏幕使用redux从WebApi获取数据，并根据imageUrl显示图像。SelectImage（）调用一个函数，供用户打开图库并选择新图像

选择图像后，我希望图像显示在屏幕上，并替换当前值

this.props.items.imageUrl

。我刚刚启动redux并将其实现到我的应用程序中。我想更新redux的状态，并在其他屏幕上访问，因为图片也将显示在其他屏幕上。但是，我无法更改应用程序内的图像

所有数据都在项中

          <TouchableOpacity
            onPress={() => this.selectImage()}>
            <View style={styles.piccontainer}>
              <Image
                source={{ uri: this.props.items.imageUrl }}
                style={styles.photo} />
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button}
              onPress={() => {
                this.uploadImage();
                this.goBack()
              }}>
              <View>
                <Text style={styles.text}>Save</Text>
              </View>
          </TouchableOpacity>

export const profileAction = file => ({
    type: UPDATE_PICTURE,
    payload: file
})

我相信我必须

mapDispatchToProps

才能采取行动

function mapDispatchToProps(dispatch) {
  return {
    updatePicture: file => {dispatch(updatePicture(file))}
  }
}

调用函数后我迷路了，我是否将还原程序和操作放在与我放置获取配置文件数据的函数相同的位置？我是否创建了一个新文件，但如果我这样做了，我应该将初始状态设置为什么？谢谢你的帮助。我非常感激

profileReducer.js profileAction.js

---

我认为减速机有一个输入错误：

    case UPDATE_PICTURE:
      return {
        ...state,
        profilepic: action.payload, // <--- this instead of action.payload.file 
      }

---

希望这有帮助。请记住修复减速器

您应该添加一些更改

profileAction.js

          <TouchableOpacity
            onPress={() => this.selectImage()}>
            <View style={styles.piccontainer}>
              <Image
                source={{ uri: this.props.items.imageUrl }}
                style={styles.photo} />
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button}
              onPress={() => {
                this.uploadImage();
                this.goBack()
              }}>
              <View>
                <Text style={styles.text}>Save</Text>
              </View>
          </TouchableOpacity>

export const profileAction = file => ({
    type: UPDATE_PICTURE,
    payload: file
})

profileReducer.js

import {profileAction} from 'profileAction.js';

export function updatePicture (file) {
    return (dispatch)=> {
        //some action with file
        dispatch(profileAction(file)); 
    };
}

export default function updateprofileReducer(state = initialState, action) {
  switch (action.type) {
    case UPDATE_PICTURE:
      return {
        ...state,
        profilepic: action.payload.file
      }
    default:
      return state;
  }
}

然后在react文件中导入updatePicture，像这样连接react类

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

 if(!result.cancelled) {
      this.props.updatePicture(file);
  }

像这样替换mapDispatchToprops

function mapDispatchToProps(dispatch) {
  return {
    updatePicture: file => dispatch(updatePicture(file))
  }
}

您的选择图像功能出错。您应该像这样替换这个代码片段

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

 if(!result.cancelled) {
      this.props.updatePicture(file);
  }

---

您的updatePicture功能只能从道具中使用。

Hey！实际上，我想做的是将新选定的图像设置为items.ImageUrl，我似乎做不到，所以我将

profilepic

放在了更新图片中。我可以知道我应该怎么做，这样在我更改图片后，

items.ImageUrl

会得到更新，并显示新选择的图像吗？因此，保持道具不变是最佳做法。也就是说，不要改变它，传下去。因此，与其考虑将items.ImageUrl更改为新值，不如换个角度考虑，将init值设置为items.ImageUrl，然后单击按钮，更新该值。这就是我的意思。除非你真的需要改变道具的价值，并泡沫它回到家长，这是一个完全不同的问题。但我看到你们试图归档的东西就是我在这里描述的。使用mapStateToPropI刚刚发现

this.updatePicture（文件）

也导致了一个错误，说

this.props.dispatch不是一个函数

，我似乎无法在那里调用dispatch函数。我怎样才能解决这个问题？我还尝试将它添加到我的TouchableOpacity

onPress={（）=>{this.selectImage（）；this.updatePicture（）}

，但它似乎不起作用

 if(!result.cancelled) {
      this.props.updatePicture(file);
  }