使用bindActionCreators绑定actionCreator后调用报错：actions不是函数

我来帮你搞定这个问题！你遇到的Uncaught TypeError: actions is not a function错误，根源是对bindActionCreators的返回值理解有误，调用方式不正确。

错误原因分析 #

你绑定多个action creator的代码是这样的：

function mapDispatchToProps(dispatch) { 
  return { 
    actions: bindActionCreators(Object.assign({}, basicActions), dispatch) 
  } 
}

bindActionCreators接收一个包含多个action creator的对象后，返回的是一个对象——这个对象里的每个属性都是已经自动绑定了dispatch的函数，而不是一个可直接调用的函数。所以你后续用actions(basicActions.selectOption(text))调用时，自然会报错，因为actions是对象而非函数。

正确的调用方式 #

既然actions是一个包含绑定好的action函数的对象，你需要直接访问它的属性来调用对应方法：

componentCallback:text => actions.selectOption(text)

这里的actions.selectOption已经被bindActionCreators处理过，调用它时会自动把返回的action dispatch出去，不需要再去调用basicActions里的原函数。

简化写法（更推荐） #

其实你完全可以不用手动写mapDispatchToProps函数，Redux的connect方法支持直接传入action creator对象，它会自动帮你用bindActionCreators处理：

export default connect(mapStateToProps, basicActions)(NewClientSetup);

这样你的组件props里就会直接拥有selectOption、requestSuccess、fetchS1Users这些方法，调用起来更直接：

componentCallback:text => this.props.selectOption(text)

额外提示：异步action的正确写法 #

注意到你的fetchS1Users函数里有异步的axios请求，但当前写法会在请求还没完成时就返回并dispatch空的s1users。要处理异步action，你需要使用redux-thunk这类中间件，把函数改成返回一个函数的形式：

export function fetchS1Users(parentUserId){ 
  return (dispatch) => {
    debugger;
    axios.get(url, { params: { parentUserVal: parentUserId }, responseType: 'json' })
      .then(function (response) {
        console.log('res '+response.data);
        console.log('res JSON '+JSON.stringify(response.data));
        // 请求成功后dispatch包含真实数据的action
        dispatch({ 
          id: nextActionId++, 
          type: types.FETCH_USERS, 
          inputParam: parentUserId, 
          s1users: response.data 
        });
      })
      .catch(function (error) {
        console.log(error);
        // 可选：dispatch错误状态的action
        dispatch({ type: types.FETCH_USERS_ERROR, error });
      });
  }
}

这样才能确保请求完成后，再用返回的数据更新Redux状态。

内容的提问来源于stack exchange，提问作者Shrikant Dande