RN中使用Redux传递数据时，如何正确编写mapDispatchToProps？

看起来你遇到了两个典型的Redux使用问题：一是this.props.addImageToPost被提示不是函数，二是即便能调用，传递的图片数据也可能不是最新的。我帮你一步步拆解并修复：

1. 为什么addImageToPost不是函数？ #

这个错误通常有两个原因，先逐一排查：

（1）检查你的Action Creator是否正确定义 #

首先要确保addImageToPost是一个合法的Redux action creator——它需要返回一个包含type和payload（携带数据）的对象。比如你的addImageToPost应该长这样：

// 假设在actions/postActions.js文件中
export const addImageToPost = (imageData) => {
  return {
    type: 'ADD_IMAGE_TO_POST', // 这个type要和reducer里的处理对应
    payload: imageData // 这里就是你要传递的图片数据
  };
};

别忘了在组件文件顶部正确导入这个action creator：

import { addImageToPost } from '../actions/postActions'; // 路径根据你的项目调整

（2）确认mapDispatchToProps的配置 #

你现在用的是对象简写形式的mapDispatchToProps，这种写法是没问题的，但前提是addImageToPost确实是正确导入的action creator。如果拼写错误或者没导入，就会出现“不是函数”的报错。

2. 传递图片数据的异步坑 #

就算解决了函数的问题，你当前的代码还有一个隐藏bug：this.setState是异步的，在你调用this.setState({ imageData: response })之后立刻访问this.state.imageData，拿到的还是更新前的旧值（也就是初始的null）。

其实根本不需要等本地state更新，直接用ImagePicker回调里的response传递给Redux就行，同时更新本地state用于UI展示。修正后的getPhotoFromGallery函数：

getPhotoFromGallery = () => {
  ImagePicker.launchImageLibrary({}, (response) => {
    console.log('Response = ', response);
    if (response.didCancel) {
      console.log('User cancelled image picker');
    } else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    } else {
      // 先更新本地state用于UI渲染
      this.setState({ 
        imageData: response,
        base64URI: response.uri 
      });
      // 直接用response传递给Redux，这才是最新的图片数据
      this.props.addImageToPost(response); 
    }
  });
};

3. 额外的验证步骤 #

为了确保整个流程通顺，还要检查以下两点：

（1）Reducer是否正确处理Action #

你的post reducer需要能识别ADD_IMAGE_TO_POST这个action类型，并更新state：

// reducers/postReducer.js
const initialState = {
  imageData: null
};

export default (state = initialState, action) => {
  switch(action.type) {
    case 'ADD_IMAGE_TO_POST':
      return {
        ...state,
        imageData: action.payload // 接收传递过来的图片数据
      };
    default:
      return state;
  }
};

（2）组件中props的引用一致性 #

看你的render函数里写了const { image } = this.props;，但mapStateToProps返回的是imageData: state.post.imageData——这里明显不匹配，应该改成const { imageData } = this.props;，或者调整mapStateToProps的键名：

function mapStateToProps(state) {
  return {
    image: state.post.imageData // 和render里的props名对应
  }
}

按照上面的步骤调整后，应该就能正常把图片数据传递到Redux中了。

内容的提问来源于stack exchange，提问作者James Stirrat