1. redux 설치
npm install redux 혹은 yarn add redux//importing redux
const redux = require("redux");2. redux.CreateStore()
createStore(reducer, [preloadedState], [enhancer])앱의 state tree '전체'를 보관하는 Redux 저장소를 만든다.
그리고 중요한건,
앱 내에는 단 하나의 store(저장소)만 있어야 한다.
Arguments:
reducer(Function): 현재 state tree와 action을 인수로 받아 다음 state tree를 return하는 reducing 함수
preloadedState(any): default state. state의 초기값이 필요할 때, 선택적으로 지정해 줄 수 있다. 기본적으로 reducer가 이해하는 어떤 값이라도 올 수 있지만, 만약 reducer를 combineReducers로 만들었을 때는 전달받은 것과 같은 키 구조를 가지는 평범한 객체여야 한다.
enhancer(Function): Middleware나 시간여행, 영속성 등의 third-party 기능을 저장소에 추가하기 위해 지정할 수 있다. 참고로 Redux와 함께 제공되는 enhancer는 applyMiddleWare() 뿐이다.
Return value:
(Store): 앱의 '전체' state를 가지고 있는 객체. 이 객체의 state를 바꾸는 방법은 action을 보내는 방법이 유일하다. UI를 업데이트하기 위해 state를 subscribe할 수도 있다.
3. Store Methods
1) store.getState()
앱의 현재 state tree(= store의 reducer가 반환한 최신값)를 반환한다.
2) store.dispatch(action)
action 객체를 reducer 함수로 보내준다. state를 변경할 수 있는 유일한 방법이다.
store의 reducing 함수는 현재의 getState()와 주어진 action객체와 함께 동기적으로 호출된다. 반환된 값은 다음 state가 되어 그때부터 getState()에서 반환되고, state change listener들에게 바로 알려진다.
action(Object): 일반 객체로써, store로 data를 가져갈 수 있는 유일한 방법이다. action 객체는 type field(어떤 type의 action이 취해질 것인지 가르키는 값)를 꼭 가지고있어야 한다. type 값은 상수로 정의될 수도 있고, 다른 모듈에서 import해올 수도 있다. type값으로 Symbol값 보다는 String값을 쓰는게 좋다. 왜냐하면 String이 serializable(직렬화 가능)하기 때문이다. action을 구성하는것에 대한 자세한 사항을 알고 싶다면여기에 있다.
Return값: dispatch된 action객체
3) store.subscribe(listener)
change listener를 추가한다. action이 dispatch될 때마다 호출될 것이고, state tree의 일부가 바뀌었을 수 있는데, 그 후 callback 함수 내에서 getState()를 통해 현재 state tree를 가져올 수 있다.
Arguments
listener (Function): The callback to be invoked any time an action has been dispatched, and the state tree might have changed. You may call getState() inside this callback to read the current state tree. It is reasonable to expect that the store's reducer is a pure function, so you may compare references to some deep path in the state tree to learn whether its value has changed.
Returns
(Function): A function that unsubscribes the change listener.
change listener에서 dispatch() 호출할때 주의사항:
1. The listener should only call dispatch() either in response to user actions or under specific conditions (e. g. dispatching an action when the store has a specific field). Calling dispatch() without any conditions is technically possible, however it leads to an infinite loop as every dispatch() call usually triggers the listener again.
2. The subscriptions are snapshotted just before every dispatch() call. If you subscribe or unsubscribe while the listeners are being invoked, this will not have any effect on the dispatch() that is currently in progress. However, the next dispatch() call, whether nested or not, will use a more recent snapshot of the subscription list.
3. The listener should not expect to see all state changes, as the state might have been updated multiple times during a nested dispatch() before the listener is called. It is, however, guaranteed that all subscribers registered before the dispatch() started will be called with the latest state by the time it exits.
It is a low-level API. Most likely, instead of using it directly, you'll use React (or other) bindings. If you commonly use the callback as a hook to react to state changes, you might want to write a custom observeStore utility. The Store is also an Observable, so you can subscribe to changes with libraries like RxJS.
4) replaceReducer(nextReducer)
Replaces the reducer currently used by the store to calculate the state.
It is an advanced API. You might need this if your app implements code splitting, and you want to load some of the reducers dynamically. You might also need this if you implement a hot reloading mechanism for Redux.
Arguments
nextReducer (Function) The next reducer for the store to use.
Tips
- 앱에서 store는 하나 뿐! 여러 개의 reducer를 하나의 root reducer로 만들려면 combineReducers를 사용하자.
- state의 형식은 평범한 객체,혹은 Immuable 등을 사용할 수 있는데 보통 평범한 객체로 시작하는것 같다.
- state가 평범한 객체라면 절대 변경하지 말자.(이전 state를 덮어쓰지 말자) ex. return { ...state, ...newData }
- 서버에서 실행되는 유니버셜 앱을 위해서는 매 요청마다 별개의 store를 만들자. (아직 유니버셜 앱을 다루어보지 않아 무슨말인지 모르겠다ㅠ)
- store가 create되면, Redux는 default state를 가지는 store를 만들기 위해 dummy action을 보낸다. 이 action을 직접 다루어야 하는 건 아니다. reducer가 undefined값을 인수로 받았을 때만 default state를 반환해주자.
- 여러 개의 store enhancer를 적용하기 위해서는 compose()를 쓰면 된다.
Reference
