redux 사용예제 ( feat. useSelector / useDispatch )

구성 

Action

 - testAction

 - notiAction 

Reducer

 - notiReducer

 - rootReducer

store

type

 

---

store.js

import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './Reducers/rootReducer'

// 미들웨어가 필요한경우 참고 
// https://react.vlpt.us/redux-middleware/

const store = configureStore({
    reducer:{
        rootReducer
    }
})
export default store;

---

types.js

export default types = {
    TEST_ :"TEST",
    NOTIFICATION_ : "NOTI"
}

---

rootReducer.js

import { combineReducers } from "redux"


// 하위 리듀서들 정의
import test from './test'
import notiReducer from './notiReducer'


/* 
    connect 는
    import { useSelector, useDispatch } from 'react-redux';  을 사용하면서 사용하지 않게 되엇다.


    // redux 내의 state 가지고 오기 
    const reduxValue = useSelector(state => {console.log("state",state)})

    // action 호출
    const dispatch = useDispatch();
    ex) dispatch(액션함수(파라미터))

*/

export default combineReducers({
    test,
    notiReducer  
})

---

notiReducer.js

import types from "../types";


const initialState = {
    TestValue: "TEST",
    notiValue: false
}
export default function notiReducer(state = initialState, action) {
   // console.log("notiReducer _ action.type  =>  ", action.type)
    switch (action.type) {
        case types.NOTIFICATION_:
            return { 
                ...state,
                notiValue: action.payload
            };

        case types.TEST_:
            console.log("types.TEST")
            return {
                state
            }

        default: {
            return state
        }
    }
}

---

notiAction.js

import types from "../types";


/* 액션 생성함수 만들기 
// 액션 생성함수를 만들고 export 키워드를 사용해서 내보내주세요.
export const setDiff = diff => ({ type: SET_DIFF, diff });
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE }); */

export function setNoti(payload){
    console.log("setNoti")
    return {
        type: types.NOTIFICATION_,
        payload
    }
}

export function test(){
    console.log("test")
    return{
        type : types.TEST_,
    }
}

---

App.js

=> store 등록

import React, { useEffect } from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Provider} from 'react-redux';
import { LogBox } from 'react-native';


import store from './src/Redux/store';
import SplashScreen from './src/Screen/Navigator/SplashScreen';
import MainScreen from './src/Screen/Navigator/MainScreen';
import ConnectScreen from './src/Screen/Navigator/ConnectScreen';

const Stack = createNativeStackNavigator();


LogBox.ignoreLogs(['Non-serializable values were found in the navigation state','Remote debugger']);


const App = () => {

  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: false,
          }}
          >
          <Stack.Screen name="SplashScreen" component={SplashScreen} />
          <Stack.Screen name="ConnectScreen" component={ConnectScreen} />
          <Stack.Screen name="MainScreen" component={MainScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
};

export default App;

---

사용예시

 

action 호출

import {setNoti,test} from '../../Redux/Actions/notiAction'
import {useSelector, useDispatch } from 'react-redux'

    
    // Action 함수를 호출 하기 위함 
    const dispatch = useDispatch();

    function btnClickEvent(){
        ToastAndroid.show("비상 호출",ToastAndroid.SHORT)

        // Action  함수 호출 
        dispatch(setNoti(true))
    }

값 호출

=> 변경 될때마다 저 값이 바뀜.

    const value =  useSelector(state=>(state.rootReducer.notiReducer.notiValue))