Machine_웅_Note

구성 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_ : "..

App.js import React, { Component } from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import Home from './src/Home' import Native_Module from './src/Native_Module' import UI_Test from './src/UI_Test' import ReduxSa..

> npm install redux > npm install react-redux 설치는 굉장히 간단하다. 하지만 Redux를 처음 접한다면 상당히 어렵다. Redux를 사용하는 가장 중요한 이유는 컴포넌트들의 상태를 공유하기 위함이다. 아래는 중요한 코드만 적어두겠다. //********************************************** ******************** App.js ******************** ************************************************// ... 생략 ... import { createStore } from 'redux'; import { Provider } from 'react-redux'; const ini..

리듀서 내부에 있는 데이터의 값이 변경되지 않는 경우가 있다. 리덕스의 경우 리듀서 내부의 데이터는 불변한 것이라고 예측하기 때문에 데이터의 일부를 변경하는 것은 불가능 하다. 그렇기 때문에 새로운 데이터를 만들어 덮어 씌우는 방법으로 업데이트를 해야 한다. 리덕스 도큐먼트에서는 아래의 코드를 예시로 던져주고 있다. const initialState = { value: 0 } function counterReducer(state = initialState, action) { // Check to see if the reducer cares about this action if (action.type === 'counter/increment') { // If so, make a copy of `state`..

1-1. 리덕스 소개 리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있습니다. 추가적으로, 리덕스의 미들웨어라는 기능을 통하여 비동기 작업, 로깅 등의 확장적인 작업들을 더욱 쉽게 할 수도 있게 해줍니다. 이 미들웨어에 대해서는 나중에 다뤄보게 됩니다! 필요성 파악하기 리덕스는 글로벌 상태 관리를 하게 될 때 굉장히 효과적입니다. 물론, 리덕스를 사용하는것이 유일한 솔루션은 아닙니다. Context API 를 통해서도 동일한 작업을 할 수 있다는것을 미리 알..