按钮点击布尔值传入Redux Store时报错：customer.updateAutoLimitChange不是函数

让我们一步步排查并解决你的问题：

1. 修复按钮点击的参数传递逻辑 #

你的按钮目前没有把布尔值传递给handleSubmit函数，而且Button组件的{true}/{false}子元素不会被 onPress 事件捕获，需要修改 onPress 的调用方式，直接传递对应布尔值：

<View style={LimitStyle.autoInc}>
  <Button 
    title={'Increase Limit Automatically'} 
    onPress={() => this.handleSubmit(true)} 
    color={'#FFFFFF'} 
  />
</View>
<View style={LimitStyle.manInc}>
  <Button 
    title={'Wait for my permission'} 
    onPress={() => this.handleSubmit(false)} 
    color={'#20273D'} 
  />
</View>

2. 修正handleSubmit函数的参数使用 #

你之前错误地使用了全局内置对象Boolean，这完全不是按钮传递的目标布尔值，需要修改函数来接收参数，并正确传入Redux action：

handleSubmit = (autoLimitChange) => {
  console.log('autoLimitChange: ', autoLimitChange);
  if (autoLimitChange !== null) {
    // 确保updateAutoLimitChange是正确导入的action creator
    dispatch(updateAutoLimitChange(autoLimitChange));
    navigation.navigate('Salary');
  }
}

3. 检查Redux Action Creator的定义 #

报错提示updateAutoLimitChange不是函数，大概率是这个action creator没有正确定义。你需要确保它是一个返回action对象的函数，比如：

// 示例：action文件中的定义
export const updateAutoLimitChange = (value) => ({
  type: 'UPDATE_AUTO_LIMIT_CHANGE', // 这个type要和reducer中的处理逻辑对应
  payload: value
});

4. 确保组件正确连接Redux #

如果你使用的是类组件，需要通过connect高阶组件把dispatch和action creator映射到组件props中：

import { connect } from 'react-redux';
import { updateAutoLimitChange } from '../actions/customerActions';

class YourComponent extends React.Component {
  // ...你的组件其他代码
  handleSubmit = (autoLimitChange) => {
    console.log('autoLimitChange: ', autoLimitChange);
    if (autoLimitChange !== null) {
      // 调用props中映射后的action creator
      this.props.updateAutoLimitChange(autoLimitChange);
      navigation.navigate('Salary');
    }
  }
}

// 映射action creator到props
const mapDispatchToProps = {
  updateAutoLimitChange
};

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

5. 检查Reducer是否处理对应Action #

最后要确保你的customer reducer里处理了这个action，正确更新state：

const initialState = {
  autoLimitChange: false, // 设置默认值
  // 其他state字段
};

export default function customerReducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_AUTO_LIMIT_CHANGE':
      return {
        ...state,
        autoLimitChange: action.payload
      };
    // 其他action处理逻辑
    default:
      return state;
  }
}

按照以上步骤逐一排查，应该就能解决你遇到的报错问题。

内容的提问来源于stack exchange，提问作者Jason Byron Beedle