title: Design Redux actions and reducers for a React reusable component
body: <p>I'm developing a large application with Redux and React and I decided to make some reusable components like custom checkboxes and radio buttons.</p>
  
  <p>As I want to store this information into the Redux store to be able to debug state of the application easily and the same component have the same functionality everywhere, it seems a good idea to create reducers and actions for each component. </p>
  
  <p>However Redux reducers return a new state and save it in the store with the name of the reducer as a key and this forbids having more than one component of the same type in the same page using the same actions and reducers but keeping different states.</p>
  
  <p>I think there are two solutions to this problem:</p>
  
  <ul>
  <li><p>Create different actions and reducers for each component that I use, even thought the component and it's functionalities are the same. This solutions doesn't seem a good solution because there will be a lot of redundant code.</p></li>
  <li><p>Create actions with sufficient parameters to be able to differentiate each one in the reducer and that way change only the part of the state that is specified.</p></li>
  </ul>
  
  <p>I went forward with the second option.</p>
  
  <p>Actions file for the CheckBox component:</p>
  
  <pre><code>import {createAction} from 'redux-actions';
  
  /****** Actions ******/
  export const CHANGE_CHECKBOX_STATE = "CHANGE_CHECKBOX_STATE";
  
  /****** Action creators ******/
  export const changeCheckboxState = createAction(CHANGE_CHECKBOX_STATE, (block, name, state) =&gt; {
    return {
      block,
      name,
      state: {
        checked: state,
      }
    };
  });
  </code></pre>
  
  <p>Reducers file for the CheckBox component:</p>
  
  <pre><code>import {handleActions} from 'redux-actions';
  
  import {CHANGE_CHECKBOX_STATE} from './CheckBox.actions';
  
  export const checkBoxComponent = handleActions({
    CHANGE_CHECKBOX_STATE: (state, action) =&gt; ({
      [action.payload.block]: {
        [action.payload.name]: action.payload.state
      }
    })
  }, {});
  </code></pre>
  
  <p>I use <code>block</code> to specify the page, <code>name</code> to specify the name of the specific component (e.g. gender) and state as and object with the new state.</p>
  
  <p>But this solution has some problems too:</p>
  
  <ul>
  <li>Can't specify initial state of each component because the keys of the state are dynamic.</li>
  <li>Complicates to much the store structure with a lot of nested states.</li>
  <li>Aggregates data by component and not by form which will complicate debugging and it's logically incorrect.</li>
  </ul>
  
  <p>I don't have enough experience with Redux and React to think of a better solution to this problem. But it seems to me that I'm missing something important about React-Redux relationship and this raises some questions:</p>
  
  <ul>
  <li><p>Is it a good idea to store state of this reusable components into the Redux store?</p></li>
  <li><p>Am I wrong in binding together React components with Redux actions and reducers?</p></li>
  </ul>