[React Native] redux

React 목록

 

모듈 설치

$ npm install redux
$ npm install react-redux
$ npm install redux-thunk

 

파일 생성

$ mkdir src
$ mkdir src/redux
$ mkdir src/screens
$ touch src/redux/actions.tsx
$ touch src/redux/reducer.tsx
$ touch src/redux/store.tsx
$ touch src/screen/HomeScreen.tsx
$ touch src/screen/ChildScreen.tsx

 

 

 

store.tsx

import {legacy_createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import userReducer from './reducer';

const rootReducer = combineReducers({userReducer});

export const Store = legacy_createStore(rootReducer, applyMiddleware(thunk));

 

 

 

reducer.tsx

import {AnyAction} from 'redux';
import {SET_USER_NAME, SET_USER_AGE} from './actions';

const initialState = {
  name: '',
  age: 0,
};

function userReducer(state = initialState, action: AnyAction) {
  if (action.type === SET_USER_NAME) {
    return {...state, name: action.payload};
  }
  if (action.type === SET_USER_AGE) {
    return {...state, age: action.payload};
  }
  return state;
}

export default userReducer;

 

 

 

actions.tsx

export const SET_USER_NAME = 'SET_USER_NAME';
export const SET_USER_AGE = 'SET_USER_AGE';

export const setName = (name: string) => ({
  type: SET_USER_NAME,
  payload: name,
});

export const setAge = (age: number) => ({
  type: SET_USER_AGE,
  payload: age,
});

 

 

 

 

 

App.tsx

import React from 'react';
import {View} from 'react-native';
import {Provider} from 'react-redux';
import {Store} from './src/redux/store';
import HomeScreen from './src/screens/HomeScreen';
import ChildScreen from './src/screens/ChildScreen';

export default function App() {
  return (
    <Provider store={Store}>
      <View style={styles.container}>
        <HomeScreen />
        <ChildScreen />
      </View>
    </Provider>
  );
}

 

 

 

 

 

HomeScreen.tsx

import React from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import {setName, setAge} from '../redux/actions';

export default function HomeScreen() {
  const {name, age} = useSelector((state: any) => state.userReducer);
  const dispatch = useDispatch();

  return (
    <View style={styles.container}>
      <Text>HomeScreen</Text>
      <Text>이름: {name}</Text>
      <Text>나이: {age}</Text>
      <Button
        title="이름변경(이순신)"
        onPress={() => {
          dispatch(setName('이순신'));
        }}
      />
      <Button
        title="나이변경(30 )"
        onPress={() => {
          dispatch(setAge(30));
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
  },
});

 

 

 

 

ChildScreen.tsx

import React from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import {setName, setAge} from '../redux/actions';

export default function ChildScreen() {
  const {name, age} = useSelector((state: any) => state.userReducer);
  const dispatch = useDispatch();

  return (
    <View style={styles.container}>
      <Text>ChildScreen</Text>
      <Text>이름: {name}</Text>
      <Text>나이: {age}</Text>
      <Button
        title="이름변경(홍길동)"
        onPress={() => {
          dispatch(setName('홍길동'));
        }}
      />
      <Button
        title="나이변경(40)"
        onPress={() => {
          dispatch(setAge(40));
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
  },
});

 

 

 

React 목록