React Redux Tutorials - 7 - Store

Redux Store

---

• One store for the entire application.
• Responsibilites
  • holds application state
  • allows access to state via getState()
  • allows state to be updated via dispatch(action)
  • registers listners via subscribe(listener)
  • handles unregistering of listners via the function returned by subscribe(lisetner)

Redux holds application state

---

// create a store that will hold our app state.
const initialState = {
  numOfCakes: 10
}

To create store, introduce the redux library.

• React

import redux from 'redux'

• Node.js

const redux = require('redux')

Redux library provides a method called createStore.

const createStore = redux.createStore();
...
const store = createStore();

The create store method accpets a parameter which is the reducer function. The reducer function has the initial state of the application.

const store = createStore(reducer);

This is required for the store to make the state transitions based on the actions received.

Redux allows access to state via getState()

---

const store = createStore(reducer);
console.log('Initial State', store.getState());
//Initial State { numOfCakes: 10 }

Redux registers listners via subscribe(listener)

---

allow the app to subscribe to changes in the store.

const store = createStore(reducer);
console.log('Initial State', store.getState());

// set up a listener to the store
// subscribe method accepts a function
// anytime the store updates, the function is executed
store.subscribe(() => console.log('Updated state', store.getState()))

Redux allows state to be updated via dispatch(action)

---

const store = createStore(reducer);
console.log('Initial State', store.getState());

//subscribe method accepts a function
store.subscribe(() => console.log('Updated state', store.getState()))

// dispatch method accepts an action as its parameter
/* you could directly provide the action. But we have action creator.
   We invoke the action creator as a parameter which in turn will return the action. */
store.dispatch(buyCake);
// cause more transition
store.dispatch(buyCake);
store.dispatch(buyCake);

handles unregistering of listners via the function returned by subscribe(lisetner)

---

const store = createStore(reducer);
console.log('Initial State', store.getState());

//subscribe method accepts a function
const unsubscribe = store.subscribe(() => console.log('Updated state', store.getState()))

// dispatch method accepts an action as its parameter
/* you could directly provide the action. But we have action creator.
   We invoke the action creator as a parameter which in turn will return the action. */
store.dispatch(buyCake());
// cause more transitions
store.dispatch(buyCake());
store.dispatch(buyCake());

unsubscribe();

Node index

Initial State { numOfCakes: 10 }
Updated state { numOfCakes: 9 }
Updated state { numOfCakes: 8 }
Updated state { numOfCakes: 7 }

Summary

---

const store = createStore(reducer);

createStore로 스토어를 생성한다.

createStore 메서드는 매개변수로 reducer 함수를 취한다.
reducer함수는 State 업데이트 방식을 제어한다.

console.log('Initial State', store.getState());
// Initial State { numOfCakes: 10 }

스토어가 제공하는 getState()메서드로 애플리케이션의 현재 State를 확인할 수 있다.

store.subscribe(() => console.log('Updated state', store.getState()))

스토어가 제공하는 subscribe메서드로 스토어의 listener를 설정한다.

subscribe메서드의 매개변수가 listener 함수가 되고, 스테이트 변경이 있을 때마다 함수가 실행된다.

store.dispatch(buyCake());

액션을 디스패치하면, 리덕스는 액션의 타입을 확인한다.

그리고 reducer함수의 switch cases 중에 이 타입과 일치하는 것을 찾아 statement를 실행하면서 새로운 state를 리턴한다.

이렇게 스토어의 state가 업데이트 되면서 listener 함수가 호출된다.

Why Action Creators?

---

You could by all means pass in the object itself as a parameter to the dispatch method.

But by having an action creator, any changes to the action object will happen in only one place.

📃 Code

---

const redux = require('redux');
const createStore = redux.createStore;

const BUY_CAKE = 'BUY_CAKE' 

// implement an action creator 
function buyCake() {
  return {
    type: BUY_CAKE,
    info: 'first redux action'
  }
}

// define a default state
// state has to be represented by a single object.
const initialState = {
  numOfCakes: 10
}

// define a reducer function 
// initialState is passed in as an argument to the reducer function
// (previousState, action) => newState
const reducer = (state = initialState, action) => {
  switch(action.type) {
    case BUY_CAKE: return {
      ...state,
      numOfCakes: state.numOfCakes - 1
    }
    // ! we are not mutating the state object but return a new object.

    // if there was an action which we haven't accounted for
    default: return state 
  }
}

//create a redux store 
const store = createStore(reducer);
/* The create store method accpets a parameter which is the reducer function. 
   The reducer function has the initial state of the application. 
   This is required for the store to make the state transitions based on the actions received. */

// allows access to state via `getState()`
console.log('Initial State', store.getState());
// Initial State { numOfCakes: 10 }

// registers listners via `subscribe(listener)`
// subscribe method accepts a function(listener)
const unsubscribe = store.subscribe(() => console.log('Updated state', store.getState()))

// allows state to be updated via `dispatch(action)`
// dispatch method accepts an action as its parameter
/* you could directly provide the action. But we have action creator.
   We invoke the action creator as a parameter which in turn will return the action. */
store.dispatch(buyCake());
// cause more transitions
store.dispatch(buyCake());
store.dispatch(buyCake());

// handles unregistering of listeners
unsubscribe();

위 코드는 Redux의 기본 작동 원리를 나타내며 React-Redux 패키지는 이 원리를 기반으로 하되 몇 가지의 helper function을 제공한다.

🔗 React Redux Tutorials - 7 - Store