Redux store is being updated but the component is not re-rendering

Viewed 41

I have following reducer:

const INITIAL_STATE = {
  wallets: [],
  selectedAccount: null,
  selectedNetwork:null  
};

export const setActive = (id, payload) => ({
   type: actionTypes.SET_ACTIVE,
   id,
   payload,
});

const editItem = wallets.map(item => (item.id !== action.id ? { 
   ...item, active: false } : { ...item, active: true }));

case actionTypes.SET_ACTIVE:
  return {
    ...state,
    accounts: [...state.wallets,editItem],
    selectedAccount: action.payload,
  };

I console.logged everything and store is being updated but the problem is my component is not re-rendering for some reason.

setActiveFunc = item => {
   const { actions } = this.props;
   const selectedAcc = {
      name: item.name,
      address: item.address,
      active: item.active,
      id: item.id,
   };
   actions.setActive(item.id, selectedAcc);
};
const UserMenuAccount = ({ active, account, balance }) => (
  <View style={styles.accountContainer}>
    <Image
      source={require('../../../assets/Usermenu/check.png')}
      style={[styles.icon, { opacity: active ? 1 : 0 }]}
    />
    <Text style={styles.text}>{account}</Text>
    <Text style={[styles.text, { opacity: 0.5 }]}>
      {balance}
      {' '}
      ETH
    </Text>
  </View>
);

class UserMenuAccounts extends Component {
  setActiveFunc = item => {
    const { actions } = this.props;
    const selectedAcc = {
      name: item.name,
      address: item.address,
      active: item.active,
      id: item.id,
    };
    actions.setActive(item.id, selectedAcc);
  };

  render() {
    const { GetWallets } = this.props;
    return (
      <View>
        {GetWallets.map(users => (
          <TouchableOpacity
            onPress={() => {
              this.setActiveFunc(users);
            }}
            key={users.id}
          >
            <UserMenuAccount
              account={`${users.name}`}
              balance={0}
              active={users.active}
              key={users.id}
            />
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

The function shall create checked icon once active=true and even tho reducer is doing its thing the icon is not appearing

This is the function I'm using in the component, any suggestions?

2 Answers

You forgot to add the 'accounts' in the initial state of your reducer:

const INITIAL_STATE = {
  wallets: [],
  accounts: [],
  selectedAccount: null,
  selectedNetwork:null  
};

accounts: [...state.wallets,editItem],

should rather be

accounts: state.wallets.map(item => (item.id !== action.id ? { ...item, active: false } : { ...item, active: true }));

see map will create a new array above you were spreading an array and inserting another inside it

Related