REDUX 규칙

1. 단 한 개의 store를 사용합니다.

2. State를 변경하기 위해서는 action이 dispatch 되어야 합니다.

3. reducer 는 정보를 받아서 상태를 어떻게 업데이트 할지 정의합니다.

• reducer = action 객체를 처리하는 함수
• reducer는 ‘순수 함수’로 작성 되어야 합니다. → 비동기 함수는 사용불가합니다.

설치하기

$ yarn add redux / $ yarn add react-redux

준비하기

만들어야 할 것은 세가지 입니다.

1. action
2. reducer
3. store

폴더 구조는 아래와 같습니다.

redux를 Subscibers 라는 컴포넌트에서 사용할 것입니다.

1. 컴포넌트를 만들어 주고

2. store.js 를 만들어 놓습니다.

3. 컴포넌트와 비슷한 이름이면 좋으니 subscribers 라는 폴더를 만들어줍니다.

   • 이 폴더에서 만들어야 할 것은 총 두가지 actions와 reducer입니다.

4. 일단 actions 부터 생성하겠습니다.

   아래와 같이 생겼는데, 어디선가 actions의 함수를 호출하면 type을 return 해줍니다.

   //actions.js
   export const addSubscriber = ()=>{
     return {
       type: "ADD_SUBSCRIBER"
     }
   }
   export const removeSubscriber = ()=>{
     return {
       type:"REMOVE_SUBSCRIBER"
     }

   "ADD_SUBSCRIBER" 와 같이 적힌 내용을 재사용 할 것이기 때문에 변수로 선언합니다.

   export const ADD_SUBSCRIBER = "ADD_SUBSCRIBER"

   그리고 이 내용을 새로운 types.js 라는 새로운 파일에 저장해서 불러서 사용하겠습니다.

   //types.js
   export const ADD_SUBSCRIBER = "ADD_SUBSCRIBER"
   export const REMOVE_SUBSCRIBER ="REMOVE_SUBSCRIBER"

   //actions.js
   import {REMOVE_SUBSCRIBER,ADD_SUBSCRIBER} from './types'
   export const addSubscriber = ()=>{...}

5. 그 다음은 type을 토대로 state를 바꾸는 reducer.js 를 생성해줍니다.

   import {REMOVE_SUBSCRIBER,ADD_SUBSCRIBER} from './types'
   
   const initialState ={count : 370}
   
   const subscribersReducer = (state=initialState,action)=>{
     switch(action.type){
       case ADD_SUBSCRIBER:
         return {
           ...state,
           count:state.count+1
         }
       case REMOVE_SUBSCRIBER:
         return {
           ...state,
           count:state.count-1
         }
       default:return state
     }
   }
   export default subscribersReducer

   • types들을 import 해오고
   • initialState라는 state로 초기값을 만들어 놓습니다.
   • subscribersReducer라는 reducer함수는 다음과 같습니다.
     • state 값으로 앞서 만든 초기값을 사용하고
     • 내용으로 action 을 받아옵니다.
     • 이 action의 type이 ADD~면 나머지 state는 그대로 두고 count만 올려줍니다. REMOVE~도 마찬가지입니다. 아무 값이 없으면 원래 값을 돌려줍니다.
       

6. 이렇게 만든 reducer를 사용할 곳은 store입니다.

   import {createStore} from 'redux'
   import subscribersReducer from './subscribers/reducer'
   
   const store = createStore(subscribersReducer)
   export default store

   • redux를 통해 createStore를 불러와 앞서 만든 리듀서를 묶어줍니다.
     • 이 값을 이제 우리는 store라고 부를 것입니다.

7. 만든 store를 사용하려면 최상위 컴포넌트에서 묶어줘야합니다.

   import Subscribers from './components/Subscribers';
   import {Provider} from 'react-redux'
   import store from './redux/store'
   
   function App() {
     const count = 5
     return (
       <Provider store={store}>
         <div >
           <Subscribers/>
         </div>
       </Provider>
     );
   }
   export default App;

   • ‘react-redux’에서 Provider를 불러와서 최상위로 묶어주고
   • store도 불러와서 Provider의 props로 store라는 값을 넣어줍니다.