Question

Profile.js

“配置文件”屏幕使用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>

这是我的selectImage（）函数

  selectImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1
    });
    let file = result.uri
    if (!result.cancelled) {
      this.updatePicture(file)
    }
  }

我认为我必须mapDispatchToProps才能提出诉讼。

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

调用函数后迷路了，我将简化器和操作与获取概要文件数据的函数放在同一位置吗？我是否创建一个新文件，但是如果这样做，我将初始状态设置为什么？感谢您的帮助。非常感谢。

profileReducer.js

const initialState = {
  profilepic: '',
};

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

profileAction.js

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

Answer 1

我认为减速器中有错字：

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

并且由于您没有提到，因此您将需要mapStateToProps将redux中的profilepic状态映射到prop。

但这里又提出了一个问题，您的道具采用对象（items.imageUrl）的格式。但是您的状态只是一个字符串（profilepic）。除非您打算使profilepic一个对象，该对象存储减速机没有执行的profilepic图像项，否则您将需要修复该问题。否则，如果您打算一次只存储一个图像网址，则需要将redux状态映射到新的prop并将init值设置为items.imageUrl值。

编辑：基于OP澄清的内容，这里还有一些示例代码，请注意：由于我没有全部代码，因此我不知道有没有任何帮助方法将新的reducer注入商店并设置初始值。这是首选方法，但仅用于显示mapStateToProps的想法：

<TouchableOpacity onPress={() => this.selectImage()}>
  <View style={styles.piccontainer}>
    <Image
      source={{ uri: this.props.imageUrlFromRedux || this.props.items.imageUrl }}
      style={styles.photo}
    />
  </View>
</TouchableOpacity>

然后您已经定义了mapStateToProps

const mapStateToProps = state => ({
  imageUrlFromRedux: state.profilepic,
});

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

希望获得帮助。并且请记住修复您的减速器

Answer 2

您应该添加一些更改

profileAction.js

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);

像这样替换mapDispatchToprops

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

您的 selectImage 功能有误。您应该像这样替换此代码片段

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

您的updatePicture功能仅在道具中可用。

使用mapDispatchToProps更改为新的状态值

Profile.js

profileReducer.js

profileAction.js

2 个答案: