【Redux入門】初学者でも理解できるReduxの仕組みを解説します！(Redux Toolkitを使用) - YouTube
ひきつづき上記のYoutube動画を参考にして、React Nativeで作成してみます。
（プロジェクト名）/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 } from './redux/counterSlice';
function ContainerApp(){
const count = useSelector*1}
/>
</View>
)
}
export default function App() {
return (
<Provider store={store}>
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<ContainerApp/>
<StatusBar style="auto" />
</View>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
（プロジェクト名）/ redux / store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";
export const store = configureStore({
//Reducerを定義
reducer: {
counter: counterReducer,
}
})
（プロジェクト名） / redux / counterSlice.js
import { createSlice } from "@reduxjs/toolkit";
export const counterSlice = createSlice({
name: "counter",
initialState: {
value: 0,
},
reducers:{
increment: (state) =>{
state.value += 1;
}
}
})
export const {increment} = counterSlice.actions;
export default counterSlice.reducer;
※今回は、JS Debuggerからコードをコピペしてます。
