Redux Toolkit array definition

Question

I'm trying to learn redux-toolkid. I'm trying to pull data by defining data in array in Redux-Toolkid. But when I define as below, I get the error in the picture. Describing const newList = { id: "1", text: "cc", }; Unfortunately, despite all my attempts, I could not define it as an array.

`import React from 'react';
import {View, Text, Button, FlatList} from 'react-native';
import {Provider, useDispatch, useSelector} from 'react-redux';
import {configureStore, createSlice} from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState: [],
  reducers: {
    increment: (state, action) => {
      const newList = {
        id: "1",
        text: "cc",
    };
      state.push( newList);
    },
    deincrement: state => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

export const {increment, deincrement, incrementByAmount} = counterSlice.actions;

export default () => {
  return (
    <Provider store={store}>
      <View style={{flex: 1}}>
        <First />
        <Second />
      </View>
    </Provider>
  );
};

const First = () => {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();

  return (
    <View style={{flex: 1, backgroundColor: 'yellow'}}>
      <Text style={{color: 'red', fontSize: 40}}>First : {counter}</Text>

      <Button title={'-'} onPress={() => dispatch(deincrement())} />
    </View>
  );
};

const Second = () => {
  const counter = useSelector(state => state.counter);
  console.log(counter);
  const dispatch = useDispatch();

  return (
    <View style={{flex: 1}}>
      <Text style={{fontSize: 40}}>Second : {counter}</Text>
      <Button title={'+'} onPress={() => dispatch(increment())} />
    </View>
  );
};

const newList = {
        id: "1",
        text: "cc",
    };`

You can find the photo here

Answer 1

You have defined it as an array, and that's the problem!

The value of counter here is an array:

const counter = useSelector(state => state.counter);

So you will get an error on these lines:

<Text style={{color: 'red', fontSize: 40}}>First : {counter}</Text>

<Text style={{fontSize: 40}}>Second : {counter}</Text>

You cannot use {counter} inline with your text because it's not a text, it's an array of objects.

It's actually okay to have an array as a child if it's an array of string, number, etc. But when React tries to render the first element of your array it finds an object ({ id: "1", text: "cc" }) and it cannot render this.

If you are just playing around and want to see the value of the state then try this:

<Text style={{color: 'red', fontSize: 40}}>First : {JSON.stringify(counter)}</Text>

Be aware that only your increment action will work. Dispatching deincrement or incrementByAmount will cause fatal errors in the reducer because your state is an array and state.value is not defined.