React Redux 최소 설정 코드 (React Native)

리덕스는 이렇게까지 복잡하게 써야하나 싶게 좀 햇갈리는 면이 있다.

자의로는 쓸거같지 않지만, 개념 파악을 위해 가장 심플한 코드로, 하나의 파일에 작성해 보았다.

import {Button, Text, View} from "react-native";
import {Provider, useDispatch, useSelector} from "react-redux";
import {combineReducers, createStore} from "redux";


const initialState = {
	value: 0
}


const counterReducer = (state = initialState, action) => {
	switch (action.type) {
		case "PLUS":
			return {
				...state,
				value: state.value + 1
			}

		case "MINUS":
			return {
				...state,
				value: state.value - 1
			}
	}
	return {
		...state
	}
}


const rootReducer = combineReducers({
	count: counterReducer
});


const store = createStore(rootReducer);


const CounterScreen = (props)=>{
	const dispatch = useDispatch();
	const value= useSelector((state)=>state.count.value);

	return (
		<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
			<Button title="+" onPress={()=>{
				dispatch({type:"PLUS"})
			}}/>

			<Text>{value}</Text>

			<Button title="-" onPress={()=>{
				dispatch({type:"MINUS"})
			}}/>
		</View>
	)
}


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