React를 경험해보자. 6탄

 

✏️React를 경험해보자 6탄

 

Redux의 흐름부터 파악을 해야 할 것 같다.

 

    <Provider
      store={createStoreWithMiddleware(
        reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
          window.__REDUX_DEVTOOLS_EXTENSION__()
      )}
    >
      <App />
    </Provider>

 

저번에 createStoreWithMiddleware 함수를 통해 store를 생성했고, 

reducer라는 인자를 넘겨주었다.

 

// user_reducer.js

import { LOGIN_USER } from "../_actions/types";

export default function (state = {}, action) {
  switch (action.type) {
    case LOGIN_USER:
      return { ...state, loginSuccess: action.payload };
    default:
      return state;
  }
}

// reducers/index.js

import { combineReducers } from "redux";
import userReducer from "./user_reducer";

const rootReducer = combineReducers({
  userReducer,
});

export default rootReducer;

 

인자로 넘긴 reducer는 위의 코드로 되어 있다.

 

 

Redux의 State값은 오직 액션으로만 변경이 가능하다. 

이전 편에서 만든 로그인 로직을 참고해서 리덕스의 흐름을 이해해보자면, 

이메일과 비밀번호를 입력하고 제출 버튼을 눌렀을 때, dispatch(action(data))를 실행하고,

Store에서 action을 받으면 reducer를 실행시킨다. reducer는 state와 action 두가지 파라미터를 

가진 함수로, action type에 따른 로직을 실행하거나 일치하는 type이 없을 경우 초기 state를 

리턴하도록 한다. 

 

 

 

요약 : state값은 action으로만 변경이 가능하며, action이 실행되면 store는 reducer를 실행시키고, 

reducer는 일치하는 action type에 따른 로직을 실행한다.