redux

1.액션

  1-1. 액션

        -. 애플리케이션에서 스토어로 내보내는 데이터 묶음.

        -. 스토어의 유일한 정보원

        -. 액션내보내기 (store.dispatch())

        -. 모든 액션 책체는 type이라는 값을 지니고 있어야함.

  1-2. 액션생산자

        -. 액션을 만드는 함수 => 액션을 반환

        -. 바인드된 액션생산자 : 자동으로 액션을 보내줌. (dispatch)

        -. dispatch()함수를 스토어에서 store.dispatch()로 바로 접근할 수 있지만, 보통 react-redux의 connect()와 같은 헬퍼를 통해 접근함

2. 리듀서

        -. 상태가 어떻게 바뀌는지 특정함.

  2-1. 상태 설계하기

        -. 어플리케이션의 모든 상태는 하나의 객체에 저장

  2-2. 액션 다루기

        -. 이전상태와 액션을 받아서 다음상태를 반환하는 순수함수 (previsouState, action) = > newState

        -. 리듀서는 반드시 순수해야함. => 계산만 가능.

        -. 

            function todoApp(state = initialState, action){

              switch(action.type){

                case SET_VISIBIITY_FILTER : 

                return Object.assign({}, state,{

                  visibilityFilter : action.filter

                });

                default : 

                  return state;

              }

            }

            state를 변경하지 않음. Object.assing({}, state) 라고씀. (첫변째 인수로 빈 객체를 전달.)

            object spread syntax를 사용해도됨.

  2-3. 리듀서 쪼개기

          -. combineReducers() 유틸리티 사용.

3. 스토어

          -.액션과 리듀서를 같이 가져오는 객체

          -. 애플리케이션의 상태를 저장

          -. getState()를 통해 상태에 접근

          -. dispatch(action)를 통해 상태를 수정할 수 있게 하고

          -. subscribe(listener)를 통해 리스너를 등록합니다.

          -. Redux 어플리케이션에서 단 하나의 스토어만 가질 수 있음

          -. createStore()  

              =. let store = createStore(todoApp)

              =. let store = createStore(todoApp, window.STATE_FROM_SERVER)

  3-1. 액션 보내기

          -. store.getState()

          -. let unsubscribe = store.subscribe(()=> console.log(store.getState()))

          -. store.dispatch(addTodo('Learn about actions'))

          -. store.dispatch(addTodo('Learn about reduces'))

          -. unsubscribe()

4. 데이터 흐름.

          -. 엄격한 한 방향 데이트 흐름.

          -. redux 생명주기

            =. store.dispatch(action)을 호출합니다.

              ..store.dispatch(action)을 앱 내의 어디서나 호출할 수 있습니다.

            =. Redux 스토어가 지정한 리듀서 함수들을 호출 합니다.

              .. 

                //애플리케이션의 현재 상태

                let previousState = {

                  visibliTodoFilter:'SHOW_ALL',

                  todos[{text:'Read the docs.', complete:false}]

                }

                // 실행되는 액션

                let action = {

                  type : "ADD_TODO", text :"Understand the flow"

                }

                //리듀서가 다음 상태를 반환함.

                let nextState = todoApp(previsouState, action)

            =. 루트리듀서가 각 리듀서의 출력을 하나로 합쳐서 하나의 상태 트리로 만듭니다.

              .. 두 결과를 함쳐서 하나의 상태로 만듭니다.

              .. return {

                  todos : nextTodos,

                  visibleTodoFilter:nextVisibleTodoFilter

                  }

              .. conbineReducers()가 편리하긴하지만 반드시써야하는 건 아닙니다. 원하신다면 루트리듀서를 직접 작성하세요.

            =. Redux 스토어가 루트 리듀서에 의해 반환된 상태 트리를 저장합니다.

              .. 이새 트리가 여러분앱의 다음 상태입니다.

5. React와 함께사용하기

  5-1. Presentational 과 Container Components

          -. Container Components (영민)

            =. 위치 : 최상위, 라우트핸들러

            =. redux와 연관됨 : 예

            =. 데이터를 읽기위해 : Redux 상태를 구독

            =. 데이터를 바꾸기 위해 : Redux 액션을 보냄

            =. 컨포넌트 관리 담당. (감싸는 용도, style 없음.)

          -. Presentational Component (우직)

            =. 위치 : 중간과 말단 컴포넌트

            =. redux와 연관됨 : 아니오

            =. 데이터를 읽기위해 : props에서 데이터를 읽음.

            =. 데이터를 바꾸기 위해 : props에서 콜백을 부름.

         -. 이 구조의 장점 : UI쪽과 Data쪽이 분리되어 프로젝트를 이해하기 쉬워지며, 커포넌트의 재사용률도 높아집니다.

  5-2. 컴포넌트 계층 설계하기

  5-3. Presentational Components

  5-4. 리덕스와연결하기

          -. react-redux에서 Provider를 불러와서 <Provider>로 루트 컴포넌트를 감싸줍니다.

                (yarn add redux react-redux 으로 react-redux를 설치해야함)

          -. 다음으로 Redux와 연결하고 싶은 컴포넌트를 react-redux의 connect() 함수로 감싸줍시다.

          -. connect()호출로 감싸진 컴포넌트는 dispath 함수를 pop으로 받게 되고 필요한 상태는 전역에서 가져오면 됩니다.