title: How to change each of state of list item separately in react redux?
body: <blockquote>
  <p><strong>Using</strong></p>
  <p>react-redux</p>
  <p>redux-persist</p>
  <p>redux-actions</p>
  <p>react-native</p>
  </blockquote>
  <p>I'm learning react-redux and react-native by myself.
  I'm trying to update a single item from list in react-redux now.
  There's many categories and stores in my project.
  An user would select one of categories, and then click 'like button' of one item in store list.
  It's like instagram or facebook.</p>
  <p>When I change one item's state, the state of every item in the store list change at the same time.</p>
  <p>I have no idea why it happens.</p>
  <p>I set the structure to <code>ducks</code> pattern to avoid change too much files when to change state.
  If anyone give some advice, I would appreciate and it could be helpful for me. Thank you.
  I saw some article to resolve this issue, have to give id to distinguish items and make the payload as object. I didn't understand well, so my code is messy now. But I'd like to know what happen to my code, so I share my code.</p>
  <hr />
  <p><strong>restaurantContainer.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>class RestaurantListContainer extends Component {
      shouldComponentUpdate(nextProps) {
          return nextProps.imgUrls !== this.props.imgUrls;
  }
  
  componentDidMount() {
      const {category, StoreActions} = this.props;
  
      try {
          StoreActions.fetchStoreInfo(category);
          StoreActions.fetchImgUrl(category);
          this.getUid();
      } catch (e) {
          console.log(e);
      }
  }
  
  async getUid() {
      const {StoreActions} = this.props;
      const uid = await storage.getItem('uid');
      StoreActions.fetchLikeList(uid);
  }
  
  render() {
      const {fetching, tabColor, tabName, category, categoryId, navigation, stores, imgUrls, like} = this.props;
      const {onClick} = this;
  
      return (
          &lt;View&gt;
              ...
  
              &lt;ScrollView&gt;
                  {
                      fetching ?
                          &lt;View&gt;
                              &lt;Bars size={30} color=&quot;#40D59B&quot;/&gt;
                          &lt;/View&gt;
                          :
                          stores.map((store, i) =&gt;
                              &lt;View key={`item-${i}`}&gt;
                                  &lt;RestaurantItem
                                      key={`restaurantItem-${i}`}
                                      i={i}
                                      category={category}
                                      navigation={navigation}
                                      storeInfo={store}
                                      imgUrls={imgUrls[i]}
                                      categoryId={categoryId}
                                      like={like}
                                  /&gt;
                              &lt;/View&gt;
                          )
                  }
              &lt;/ScrollView&gt;
          &lt;/View&gt;
      );
  }
  }
  
  export default connect(
  ({styleMod, storeMod}) =&gt; ({
      stores: storeMod.stores,
      imgUrls: storeMod.imgUrls,
      fetching: storeMod.fetching,
      likeList: storeMod.likeList
  }),
  (dispatch) =&gt; ({
      StoreActions: bindActionCreators(storeActions, dispatch),
  })
  )(RestaurantListContainer);
  </code></pre>
  <hr />
  <p><strong>restaurantItem.js</strong></p>
  <pre><code>class RestaurantItem extends Component {
  pressFunc = (item) =&gt; {
      const {navigation} = this.props;
      const {push} = navigation;
  
      console.log(item.name);
  
      push('RestaurantDetail', {info: item});
  }
  
  voteAdder = async (storeName) =&gt; {
      const uid = await storage.getItem('uid');
      const {i, categoryId} = this.props;
  
      if (uid) {
          const {VoteActions, LikeActions, category, favoriteStores} = this.props;
  
          try {
              VoteActions.voteAdd(favoriteStores, category, storeName, uid);
              LikeActions.likeClicked(storeName, category, categoryId, i);
          } catch (e) {
              console.log(e);
          }
      } else {
          alert('You are not authorized!');
      }
  }
  
  render() {
      const {i, storeInfo, category, categoryId, imgUrls, favoriteStores, like} = this.props;
  
      return (
          &lt;View style={restaurantCard}&gt;
              &lt;StoreImg
                  img={imgUrls}
                  name={storeInfo.name}
              /&gt;
              &lt;StoreInfoBlock
                  i={i}
                  storeInfo={storeInfo}
                  pressFunc={this.pressFunc}
              /&gt;
              &lt;View style={{flexDirection: 'column'}} &gt;
                  {
                          &lt;ThumbImg
                              voteAdder={() =&gt; this.voteAdder(storeInfo.name)}
                              name={storeInfo.name}
                              favoriteStore={favoriteStores[category]}
                              category={category}
                              like={like}
                              categoryId={categoryId}
                          /&gt;
                  }
                  &lt;Score count={storeInfo.count}/&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      );
  }
  }
  
  
  export default connect(
  ({voterMod, likeMod}) =&gt; ({
      favoriteStores: voterMod.favoriteStores,
      like: likeMod.like,
  }),
  (dispatch) =&gt; ({
      VoteActions: bindActionCreators(voteActions, dispatch),
      LikeActions: bindActionCreators(likeActions, dispatch),
  })
  )(RestaurantItem);
  </code></pre>
  <p><strong>thumbImg.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>export default class ThumbImg extends Component {
  onClick = () =&gt; {
      this.props.voteAdder();
  }
  
  onFlag = () =&gt; {
      const {like, categoryId, i} = this.props;
          if(like.categoryById[categoryId]) {
              if(like.storeById[i]) {
                  console.log(2);
                  return (
                      &lt;FastImage
                          resizeMode={FastImage.resizeMode.cover}
                          style={{width: 50, height: 50}}
                          source={require('...')}
                      /&gt;
                  );
              } else {
                  return (
                      &lt;FastImage
                          resizeMode={FastImage.resizeMode.cover}
                          style={{width: 50, height: 50}}
                          source={require('...')}
                      /&gt;
                  );
              }
          } else {
              return (
                  &lt;FastImage
                      resizeMode={FastImage.resizeMode.cover}
                      style={{width: 50, height: 50}}
                      source={require('...')}
                  /&gt;
              );
          }
  }
  
  render() {
      return (
          &lt;TouchableOpacity onPress={this.onClick}&gt;
              &lt;View style={{paddingTop: 15, paddingRight: 15}}&gt;
                  {
                      this.onFlag()
                  }
              &lt;/View&gt;
          &lt;/TouchableOpacity&gt;
      );
  }
  }
  </code></pre>
  <p><strong>likeMod.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>// Action types
  const ON_LIKE = 'like/ON_LIKE';
  const OFF_LIKE = 'like/OFF_LIKE';
  // action creator
  export const likeClicked = (store, category, categoryId, i) =&gt; (dispatch) =&gt; {
  const selectedCategory = {categoryById: {}};
  const categoryInfo = {
      id: categoryId,
      name: category,
  };
  
  selectedCategory.categoryById[categoryId] = categoryInfo;
  
  const selectedStore = {storeById: {}};
  const storeInfo = {
      id: i,
      name: store
  }
  
  selectedStore.storeById[i] = storeInfo;
  
  const favorites = {
      ...selectedCategory,
      ...selectedStore
  }
  
  dispatch({type: ON_LIKE, payload: favorites});
  }
  
  const initialState = {
  like: {
      categoryById: {},
      storeById: {}
  }
  };
  
  // Reducer
  export default handleActions({
  [ON_LIKE]: (state, action) =&gt; ({...state, like: action.payload}),
  [OFF_LIKE]: (state, action) =&gt; ({...state, like: action.payload}),
  }, initialState);
  </code></pre>