运行操作时 mapStateToProps 中的道具不会更新 - Redux

Question

to put them in context a bit, i use redux to update a list in a shopping cart, basically what i do is get the list add an item and update the whole list, when i execute an action i have a cartList that is not updating.

I have seen many forums and changed many things but still cannot get it to update automatically, when saving with the fast refresh if it is updated

Here is my component where I list the items in the shopping cart:

class Cart extends React.Component {

  getTotalPrice = () => {
    //TODO: get total price
    return 'TOTAL: '
  }

  render() {
    const { cartList, navigation } = this.props;
    return (
      <View style={styles.wrap}>
        <SafeAreaView>
          <Text style={styles.title}> Carro de Compras</Text>
        </SafeAreaView>
        <ScrollView style={{ flex: 1 }}>
          <FlatList
            scrollEnabled={false}
            data={cartList}
            numColumns={1}
            renderItem={({ item }) => (
              <CartItem
                navigation={navigation}
                product={item}
              />
            )}
          />
        </ScrollView>
        <View style={styles.navBuy}>
          <Text style={styles.price}>{this.getTotalPrice()}</Text>
          <Text style={styles.buttonBuy}>Comprar</Text>
        </View>
      </View>
    );
  }
}

function mapStateToProps(state) {
  return { cartList: state.cartList }
}

export default connect(mapStateToProps)(Cart);

Here I have all my actions:

export const setUser = payload => ({
    type: 'SET_USER',
    payload
});

export const setDataMayday = payload => ({
    type: 'SET_DATA_MAYDAY',
    payload
});

export const setDataCartList = payload => ({
    type: 'SET_DATA_CART_LIST',
    payload
});

Here I have my reducer, it is only one since I am learning to use redux, I have seen that you can do several reducer and combine them:

const reducer = (state = {}, action) => {

    switch (action.type) {
        case 'SET_USER':
            return { ...state, ...action.payload }
        case 'SET_DATA_CART_LIST':
            return  { ...state, ...action.payload };
        case 'SET_DATA_MAYDAY':
            return  { ...state, form: { ...state.form, ...action.payload } }
        default:
            return state;
    }
}

export default reducer;

this is store:

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, reducer)
const store = createStore(persistedReducer)
const persistor = persistStore(store)

export { store, persistor };

this is App.js:

export default class App extends Component{
  render() {
    return (
      <Provider store={store}>
        <PersistGate  loading={null} persistor={persistor}>
          <AppNavigator />
        </PersistGate>
      </Provider>
    );
  }
}

update cartList:

const handleAddCart = (props) => {

  let list = props.cartList;

    list.push(props.product);

    props.setDataCartList({
      cartList: list
    });

    Alert.alert("Se añadio el producto al carro de compras");

    Api.addItemToCart(item)
      .then(resp => {
        //TODO: handle response
      })
      .catch(error => {
        console.log(error);
      });;
  }


}

ButtonAddCart = (props) => {
  return (
    <TouchableHighlight
      onPress={() => handleAddCart(props)}>
      <View style={style.cart}>
        <Icon name="shopping-cart" size={20} color={'#E1591E'} />
        <Text> Agregar al carro!</Text>
      </View>
    </TouchableHighlight>
  );
}

const mapDispatchToProps = { setDataCartList };

function mapStateToProps(state) {
  return { cartList: state.cartList }
}

export default connect(mapStateToProps, mapDispatchToProps)(ButtonAddCart);

Answer 1

You are mutating state, you shouldn't mutate state by directly pushing to the array. Create a new array and push values to it.

const handleAddCart = (props) => {

  // create  a copy of the list
  const list = [...props.cartList];

    list.push(props.product);

    props.setDataCartList({
      cartList: list
    });

    Alert.alert("Se añadio el producto al carro de compras");

    Api.addItemToCart(item)
      .then(resp => {
        //TODO: handle response
      })
      .catch(error => {
        console.log(error);
      });;
  }


}