Props в mapStateToProps не обновляется при запуске действия - Redux

Question

чтобы поместить их в контекст, я использую приставку для обновления списка в корзине, в основном я делаю, чтобы получить список, добавить элемент и обновить весь список, когда я выполняю действие, у меня есть cartList, который не обновляется.

Я видел много форумов и многое изменил, но все равно не могу заставить его автоматически обновляться при сохранении с быстрой ссылкой sh, если обновляется

Вот мой компонент, в котором я перечисляю элементы в корзине:

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);

Здесь у меня есть все мои действия:

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
});

Здесь у меня есть редуктор, он только один, так как я учусь чтобы использовать избыточность, я видел, что вы можете сделать несколько преобразователей и объединить их:

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;

это хранилище:

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

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

export { store, persistor };

это приложение. js:

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

обновление списка корзин:

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

Вы изменяете состояние, вы не должны изменять состояние, непосредственно нажимая на массив. Создайте новый массив и добавьте в него значения pu sh.

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);
      });;
  }


}