使用 mapDispatchToProps 更改状态的新值 [英] change to new value of state using mapDispatchToProps

问题描述

Profile 屏幕使用 redux 从 WebApi 获取其数据，并根据 imageUrl 显示图像.SelectImage() 调用函数让用户打开图库并选择新图像.

The Profile screen fetches its data from the WebApi using redux and displayes the Image according to the imageUrl. The SelectImage() calls a function for users to open up the gallery and choose a new image.

选择图像后，我希望图像显示在屏幕上并替换this.props.items.imageUrl的当前值.我刚刚启动了 redux 并将其实现到我的应用程序中.我想更新 redux 的状态并在其他屏幕上访问，因为图片也会显示在其他屏幕上.但是，我无法更改应用程序内的图像.

After choosing the Image, I would like the image to be shown on the screen and replace current value of this.props.items.imageUrl. I just started redux and implemented it to my application. I would like to update the state of redux and be accessed on other screens as well, as the picture will be shown in other screens as well. However, I am unable to change the Image inside the app.

所有数据都在items

          <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() 函数

This is my selectImage() function

  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来调用一个动作.

I believe that i have to mapDispatchToProps to call an action.

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

调用函数后我迷路了，我是否将减速器和动作放在与获取配置文件数据的函数相同的位置?我是否创建了一个新文件，但如果我这样做了，我将初始状态设置为什么?感谢您的帮助.我很感激.

I'm lost after calling the function, do I put the reducers and actions in the same place as I put the function that fetches profile data? Do i create a new file, but if i do so, what do i set the initial state as? Thank you for the help. I appreciate it alot.

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

推荐答案

您应该添加一些更改

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

然后在你的反应文件中导入 updatePicture，像这样连接你的反应类

then import updatePicture in your react file, connect with your react class like this

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

像这样替换 mapDispatchToprops

Replace mapDispatchToprops like this

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

您的 selectImage 函数有误.你应该像这样替换这段代码

You have mistake in your selectImage function. You should replace this code fragment like this

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

你的 updatePicture 函数只能从 props 中使用.

Your updatePicture function is available only from props.

这篇关于使用 mapDispatchToProps 更改状态的新值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！