title: Is it possible to create a reducer with dynamic states?
body: <p>React Application 16+, redux. </p>
  
  <p>I have <code>bookRoom</code> component in <code>bookRoom.js</code> which is used to render single rectangle(which represents room) with number, as on the screenhot below. </p>
  
  <p><strong>sample render</strong>
  <a href="https://i.stack.imgur.com/rGNKx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rGNKx.png" alt="Screenshot"></a></p>
  
  <p>This component is rendered with help of <code>map</code> in the parent <code>bookRooms.js</code> and <code>room</code> is passed as input property. I'd like to change the state of the room on rectangle click and I want to rerender only that particular component that I clicked. </p>
  
  <p><strong>bookRoom.js</strong></p>
  
  <pre><code>import React, {useState} from 'react';
  import * as classes from './BookRoom.module.scss';
  import './BookRoom.module.scss';
  
  const bookRoom = function(room, setRooms, originalRoom) {
      if(!room.class) {
          room.class = classes.selected;
      }else if(room.class === classes.selected) {
          room.class = '';
      }
      originalRoom.class = room.class;
      setRooms({...room});
  };
  
  function BookRoom(props) {
      const [book, setBooks] = useState(props.book);
      const originalRoom = props.book;
      return (
          &lt;div
               title={book.reservedBy ? `Booked by ${book.reservedBy}` : ''}
               className={`${classes.room} ${book.class || ''}`}
               onClick={bookRoom.bind(null, book, setBooks, originalRoom)}&gt;
              &lt;p&gt;{book.bookId}&lt;/p&gt;
          &lt;/div&gt;
      );
  }
  
  export default BookRoom;
  </code></pre>
  
  <p><strong>Sample usage of bookRoom</strong></p>
  
  <pre><code>&lt;div className={classes.rooms}&gt;
      {rooms.map((room, index) =&gt; (
          &lt;BookRoom
              key={index}
              book={room}/&gt;
       ))}
  &lt;/div&gt;
  </code></pre>
  
  <p>My current implementation uses <code>useState</code> hook, so the room is a private state of the component and when user clicked on it, only one rectangle will be updated. Also I am storing <code>originalBook</code> which points to room from the array, becase I need someway to update data in the parent component.</p>
  
  <p>Now I want to use redux, and I'd like to create separate state per room. If amount of rooms is static I can do it, but rooms are fetched from the server and also it should be possible to remove some rooms from UI. I have this reducer:</p>
  
  <pre><code>export default combineReducers({
      rooms: roomsReducer,
      room: roomReducer
  });
  </code></pre>
  
  <p>See the object passed to combineReducers, I'd like to know if can add/remove more states on the runtime, f.e. initially I have</p>
  
  <pre><code>export default combineReducers({
      rooms: roomsReducer
  });
  </code></pre>
  
  <p>But after rooms fetched I'd like to see smth like this</p>
  
  <pre><code>export default combineReducers({
      rooms: roomsReducer
      room1: getRoomReducer(1),
      room2: getRoomReducer(2),
      room3: getRoomReducer(3)
  });
  </code></pre>
  
  <p>So it will be valid to write</p>
  
  <pre><code>function mapStateToProps(state, props) {
      return {
          room: state['room' + props.roomId].rooms,
      }
  }
  
  function mapDispatchToProps(dispatch, props) {
      return {
          book: () =&gt; dispatch({type: 'ROOM_CLICKED_'+props.bookId})
      }
  }
  </code></pre>
  
  <p>So is it possible to modify root reducer on <code>rooms</code> state changed? To create separate state per room? </p>
  
  <p>PS.Ideally get rid of keys as on the code without redux, but currently I have no ideas how to do this. </p>