Redux: How to compile action creators into one action creator sheet?

Question

For each component, I have the creators of file actions actions.js. And in it for ComponentOne, I have:

let actions = {
  logSaying() {
    console.log("Hi there");
  }
}

export default actions

Then I have one main file of action creators and tried to combine all the actions into one sheet as follows:

import componentOneActions from './ComponentOne/actions'

let actions = {
  componentOneActions,
  //componentTwoActions,
  //etc.
}

export default actions

And pass actions to all components, such as from the main file of the action creators:

import actions from './actions'

...

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

But none of the actions are transmitted when trying console.log(). Why is it not transmitted and how can I make one sheet of action creators? And is there really a better way to do this?

Thank you in advance and reply / accept the answer.

Answer 1

UPDATE

.

, actions .

document, bindActionCreators(actionCreators, dispatch) actionCreators.

actionCreators - , :

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

http://redux.js.org/docs/basics/Actions.html#action-creators

, actions actionCreators.

console.log() actions , .

function todoApp(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      console.log();
      return {}    
    default:
      return state
  }
}

http://redux.js.org/docs/basics/Reducers.html#handling-more-actions

Answer 2

componentOneActions ? , spread syntax:

let actions = { ...componentOneActions, //...componentTwoActions, //etc. }

, One Two

Answer 3

bindActionCreators()expects a flat array of action functions to bind. You are passing an object, not an array. Try running bindActionCreatorsfor each array of actions on the object.

function mapDispatchToProps(dispatch) {
  const keys = Object.keys(actions);
  const mappedActions = {}
  for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      mappedActions[key] = bindActionCreators(actions[key], dispatch)
  }
  return {
    actions: mappedActions
  }
}