Redux

Redux 란?

모든 state 는 객체형태로 'Store'이라는 공간 (ex store.js) 에 저장되어지고 관리되어진다. state를 변경하기 위해서는 'Action' 이라는 곳에 어떤 객체가 변경되었는지 작성한후 'Store' 이라는 공간에 'Dispatch' 되어야만 한다. 순수한 'Reducer' 함수를 만들고 저장되어있는 state를 바탕으로하여 새로운 state를 작성하여 저장한다.

Action

const addTodoAction = {
type: 'todos/todoAdded',
payload: 'Buy milk'
}

Action 객체는 어떤 일이 일어나고있는지 설명해주는 객체이다. Action 객체에는 type 과 payload 키가 있는데 payload는 선택적이다. type에는 string형태로 만드는데 "domain/eventname" 처럼 특징적 이름을 짓고 / 뒤에는 설명을 적기도한다. payload에는 어떤일이 일어날지 정보를 적는 field 이다. state를 store에 저장하기 위해서는 'Dispatch'를 거쳐야한다.

Reducer

Reducer은 현재 state의 값을 가지고있는 인자 하나와, 변화를 나타내어주는 'Action' 객체를 인자로 가지고있다. 새로운 state 값을 return 해준다. (State,action) =>newState. event listner 와 같은 형식으로 버튼을 클릭 했을경우 state가 변화하는 type이다.
*원래 있던 state를 수정하는것이 아니라 '반드시' state를 복사하여 copy된 state를 수정한다. (They must make immutable updates, by copying the existing state and making changes to the copied values).

Reducer logic
reducer에 action type이 있는지 없는지 확인한다. 만약 있을 경우에 state를 복사하여 새로운값을 넣고 return 한다.
만약 없을 경우 바뀌지 않은 state를 return 한다.

//state 초기값 value 키를 0으로 초기화시킴
const initialState = { value: 0 }
//counterReducer는 초기화 시킨 state와 action 객체를 인자로 받는다
function counterReducer(state = initialState, action) {
  //action type이 있는지 없는지 확인!
if (action.type === 'counter/incremented') {
    //  있다면 original state를 복사하고 copy본을 새로운 값으로 update시키고 return 해준다!
    return {
      ...state,
      value: state.value + 1
    }
  }//그렇지 않을경우 origianl state를 return 시켜준다.
  return state
}

Dispatch

store.dispatch('ACTION')을 사용하여 state를 업데이트 시켜준다.

store.dispatch({ type: 'counter/incremented' })

console.log(store.getState())

Store

Store는 모든 state를 관리하는 공간이다. CreateStore()를 사용하여 reducer 함수랑 연결시켜줄수 있다.
let store = createStore(counterReducer)
getState()를 사용하여 현재 state 값을 return 시켜준다.

import { createStore } from 'redux'
const store = createStore(rootReducer);

Selectors

Selectors는 store에 저장되어있는 state중에서 특정 원하는 정보를 선택하여 가져올수 있게 해주는 function이다.

const selectCounterValue = state => state.value

const currentValue = selectCounterValue(store.getState())
console.log(currentValue)

useSelector()

useSelector()는 컴포넌트와 state를 연결하는 역할을 한다. 컴포넌트에서 useSelector 메소드를 통해 store의 state에 접근할 수 있다.

const result: any = useSelector(selector: Function, equalityFn?: Function)


import React from 'react'
import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector(state => state.counter)
  return <div>{counter}</div>
}

useDispatch()

Action 객체를 Reducer로 전달해주는 메소드.

const dispatch = useDispatch()

import React from 'react'
import { useDispatch } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
      </button>
    </div>
  )
}