Redux toolkitを再度使う

App.js

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, Text, View, Button } from 'react-native';

import {store} from './redux/store';

import {Provider, useDispatch, useSelector} from 'react-redux';

import { increment_white } from './redux/counterWhiteSlice';

import Parts from './components/Parts';

function ContainerApp(){

 const sub_value_white = useSelector*1}/>

          </View>

          <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'center'}}>

            <Text>黒</Text>

            <Text>{sub_value_black}</Text>

            <Button

               title='+'

               onPress={() => dispatch(increment_black())}/>

          </View>

           

        </View>

    )

}

const styles = StyleSheet.create({

    container: {

        flex:1,

        alignItems: 'center',

        justifyContent: 'center'

    }

})

redux/store.js

import { configureStore } from "@reduxjs/toolkit";

import counterWhiteReducer from "./counterWhiteSlice";

import counterBlackReducer from "./counterBlackSlice";

export const store = configureStore({

  //Reducerを定義

  reducer: {

    counter_white: counterWhiteReducer,

    counter_black: counterBlackReducer,

  }

})

redux/counterWhiteSlice.js

import { createSlice } from "@reduxjs/toolkit";

export const counterWhiteSlice = createSlice({

  name: "counter_white",

  initialState: {

    value: 0,

    sub_value_white: 0,

  },

  reducers:{

    increment_white: (state) =>{

      state.value += 1;

      state.sub_value_white += 1;

    }

  }

})

export const {increment_white} = counterWhiteSlice.actions;

export default counterWhiteSlice.reducer;

redux/counterBlackSlice.js

import { createSlice } from "@reduxjs/toolkit";

export const counterBlackSlice = createSlice({

  name: "counter_black",

  initialState: {

    value: 0,

    sub_value_black: 0,

  },

  reducers:{

    increment_black: (state) =>{

      state.value += 1;

      state.sub_value_black += 1;

    }

  }

})

export const {increment_black} = counterBlackSlice.actions;

export default counterBlackSlice.reducer;

*1:state) => state.counter_white.sub_value_white);

 const sub_value_black = useSelector((state) => state.counter_black.sub_value_black);

 const count = sub_value_black + sub_value_white;

 return(

  <View>

   <Text>総数：{count}</Text>

   <Parts/>

  </View>

 )

}

export default function App() {

 return (

 <Provider store={store}>

  <View style={styles.container}>

   <ContainerApp/>

   <StatusBar style="auto" />

  </View>

 </Provider>

 );

}

const styles = StyleSheet.create({

 container: {

  flex: 1,

  backgroundColor: '#fff',

  alignItems: 'center',

  justifyContent: 'center',

 },

});