React -- Redux 기본 개념 정리



참고: http://dobbit.github.io/redux/

         http://redux.js.org/docs/introduction/Examples.html

         https://egghead.io/series/getting-started-with-redux

         http://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutable-js/

         https://www.youtube.com/watch?v=okdC5gcD-dM

         https://www.toptal.com/react/react-redux-and-immutablejs

         https://css-tricks.com/learning-react-redux/

         https://www.codementor.io/reactjs/tutorial/intro-to-react-redux-pros

         http://d2.naver.com/news/7030975

         http://www.jchapron.com/2015/08/14/getting-started-with-redux/




** redux 는 react 이외에도 angular, amber, jquery 등과도 사용할수있다.




<< 3가지 원칙 >>


1. Single source of truth


    The state of your whole application is stored in an object tree within a single store.


2. State is read-only


    The only way to mutate the state is to emit an action, an object describing what happened.


3. Changes are made with pure functions


    To specify how the state tree is transformed by actions, you write pure reducers.








** Action creator 

  -- function that create action.

  -- simply return an action



예)


function addTodo(text) {

  return {

    type: ADD_TODO,

    text

  }

}



++비교 : Flux 의 action creator  = action + dispatch


  -- store.dispatch() 를 통해 Store 에 전달함.



** dispatcher 는 없음.




** Reducers

  -- action 에 반응하여 application 의 state가 어떻게 바뀔지를 정한다.

  -- In Redux, all application state is stored as a single object.





** store 는 한개만 존재


** Store 의 기능

  - Holds application state;

  - Allows access to state via getState();

  - Allows state to be updated via dispatch(action);

  - Registers listeners via subscribe(listener);

  - Handles unregistering of listeners via the function returned by subscribe(listener).






예)


// Every time the state changes, log it

// Note that subscribe() returns a function for unregistering the listener

let unsubscribe = store.subscribe(() =>

  console.log(store.getState())

)


// Dispatch some actions

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

store.dispatch(addTodo('Learn about reducers'))

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

store.dispatch(completeTodo(0))

store.dispatch(completeTodo(1))

store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))


// Stop listening to state updates

unsubscribe()






** 미들웨어는 액션을 보내는 순간부터 스토어에 도착하는 순간까지 사이에 서드파티 확장을 사용할 수 있는 지점을 제공











         ---> Container Components 는 Flux 의 Controller View 와 비슷한듯!!!!

























'React, React Native' 카테고리의 다른 글

react -- babel 설정 기초  (0) 2016.05.17
React -- Redux 기본 개념 정리  (0) 2016.05.07
React -- Flux 기본 개념 정리  (0) 2016.04.22
React -- 기초 개념 정리  (0) 2016.04.18
React -- WebStorm 10 설정하기  (0) 2016.04.18
React -- 주요 변천사 살펴보기  (0) 2016.04.18
Posted by 자유프로그램
TAG ,

댓글을 달아 주세요