Dispatch action works but store does not get updated

Question

I'm a "advanced beginner" in programming in React Native including Redux. Now I am at a point I am struggeling to get the store (and therefore the re-render of the UI) updated. Per the best of my knowledge, I did follow the core rules required:

• Make a clone (new object) of the state and return a new, modified state object
• Dispatch an action by triggering an action creator

Any hint for me whats wrong will be highly appreciated:

APP.JS

import React from "react";
import { createStore, combineReducers } from "redux";
import  { Provider } from "react-redux";    

import Navigator from "./navigation/navigator";
import productReducer from "./store/reducers/products";

const rootReducer = combineReducers({
  product: productReducer,
});

const store = createStore(rootReducer);
console.log("Erstellter Store: ", store.getState());

export default function App() {
  return (
    <Provider store={store}>
      <Navigator />
    </Provider>
  );
}

ACTION.JS

//CREATE CONSTANTS TO AVOID TYPOS IN STRING-IDENTIFYER
export const TOGGLE_PRODUCT = "TOGGLE_PRODUCT";
export const INCREMENT = "INCREMENT";

//ACTION CREATER FUNCTIONS
export const toggleProduct = (id) => {
  return {
    type: TOGGLE_PRODUCT,
    productId: id,
  };
};

REDUCER.JS

import { PRODUCTLIST } from "../../data/dummydata";
import { TOGGLE_PRODUCT } from "../actions/products";

const initialState = {
  allProducts: PRODUCTLIST,
};

const productReducer = (state = initialState, action) => {
  const newProducts = state.allProducts;
  switch (action.type) {
    case TOGGLE_PRODUCT:
      const toggledProduct = newProducts.findIndex(
        (el, idx) => el.id === action.productId
      );
      newProducts[toggledProduct].status === false
        ? (newProducts[toggledProduct].status = true)
        : (newProducts[toggledProduct].status = false);
      console.log("Reducer abgearbeitet: ", newProducts);
      return  {...state, newProducts} ;
    default:
      return state;
  }
};

export default productReducer;

COMPONENT.JS

import { useSelector, useDispatch } from "react-redux";
import React, { useEffect, useCallback } from "react";
import { Text, View, Button, FlatList, StyleSheet } from "react-native";

import Product from "../components/Product";
import { toggleProduct } from "../store/actions/products";
import { increment } from "../store/actions/products";

const ShoppingListScreen = (props) => {
  const dispatch = useDispatch();

  const toggleProductHandler = (id) => {
    dispatch(toggleProduct(id));
  };

  const Products = useSelector((state) => state.product.allProducts);

  return (
    <View style={styles.screen}>
      <FlatList
        data={Products}
        renderItem={({ item }) => (
          <View
            style={
              item.status === true ? styles.elementselected : styles.element
            }
          >
            <Product
              style={styles.text}
              id={item.id}
              product={item.product}
              department={item.department}
              status={item.status}
              onClick={() => toggleProductHandler(item.id)}
            />
          </View>
        )}
      />
      <View style={styles.button}>
        <Button
          title="FERTIG"
          onPress={() => {
            props.navigation.goBack();
          }}
        />
        {/* <Button
                    title='Stand "cartRewe" '
                    onPress={() => {
                        props.testFunction1();
                    }}
                />
                <Button
                    title='Stand "planRewe" '
                    onPress={() => {
                        props.testFunction2();
                    }}
                /> */}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    backgroundColor: "#fafafa",
    flex: 1,
    justifyContent: "flex-start",
  },
  element: {
    backgroundColor: "#ddd",
    borderWidth: 2,
    borderColor: "#bbb",
    borderRadius: 20,
    marginVertical: 5,
    marginHorizontal: 25,
  },
  elementselected: {
    backgroundColor: "#a0ffa0",
    borderWidth: 3,
    borderColor: "#64ff64",
    borderRadius: 20,
    marginVertical: 5,
    marginHorizontal: 25,
  },
  text: {
    color: "#333",
    // fontSize: 22,
    // marginHorizontal: 10
  },
  button: {
    marginVertical: 24,
  },
});

export default ShoppingListScreen;

Answer 1

I think your reducer should return the following object:

 return  {...state, allProducts: [...newProducts] };

You are currently updating the state with a new property named newProducts, while it should be named allProducts.