1
                    ← Action  ←
2
Action → Dispatcher →  Store  →  View

1
Action      ⎯
2
             ├→ Reducer ⎯→ Store New State
3
Prev State  ⎯

1
let c = 3
2
const sum = (a, b) => {
3
  return a + b + c
4
}
5
console.log(sum(1, 2)) //return 6
6
c = 5
7
console.log(sum(1, 2)) //return 8

1
        ← Action  ←
2
Reducer →  Store  →  View

1
middleware  ← store.dispatch  ← Action
2
    ↓                             ↑
3
Reducer     →      Store      →  View

1
const a = 5
2
console.log(a)
3

4
const func = () => {
5
  return 5
6
}
7

8
console.log(func())

1
const increase = () => {
2
  return {
3
    type: 'INCREASE',
4
  }
5
}
6
const increaseCountOnSleep = () => dispatch => {
7
  dispatch({ type: 'WAIT' })
8
  setTimeout(() => {
9
    dispatch(increase())
10
  }, 1000)
11
}

1
const successGetMyInfo = myInfo => dispatch => {
2
  return {
3
    type: 'SUCCESS_MY_INFO',
4
  }
5
}
6
const getMyInfo = () => dispatch => {
7
  dispatch({ type: 'REQUEST_MY_INFO' })
8
  try {
9
    //API 호출 하는 코드
10
    dispatch(successGetMyInfo('내 정보'))
11
  } catch (ex) {
12
    dispatch(failureGetMyInfo())
13
  }
14
}

1
const increase = () => ({ type: 'INCREASE' })
2
function* increaseSaga() {
3
  yield delay(1000)
4
  yield put(increse())
5
}
6

7
function* counterSaga() {
8
  // takeEvery : 액션을 모니터링 하고 발생하면 increaseSaga 호출
9
  yield takeEvery('INCREASE_ASYNC', increaseSaga)
10
}

1
const componentA = () => {
2
  const value = useSelector(state => state.value)
3
  return (
4
    // 또 다른 View code
5
    <View></View>
6
  )
7
}

1
const componentA = () => {
2
  const dispatch = useDispatch()
3
  const someAction = useCallback(() => {
4
    dispatch(someActions())
5
  }, [])
6
  return (
7
    // 또다른 View code
8
    <View></View>
9
  )
10
}

1
const componentA = () => {
2
  /* 컴포넌트를 구성하는 코드  */
3
}
4
const mapStateToProps = state => {
5
  return {
6
    /* 담고 싶은 state 지정*/
7
  }
8
}
9
const mapDispatchToProps = dispatch => {
10
  return {
11
    /*사용할 action 저장*/
12
  }
13
}
14
export default connect(mapStateToProps, mapDidpatchToProps)

1
const valueSelector = createSelector(
2
  state => state.value,
3
  value => {
4
    /* 어떠한 연산*/
5
  },
6
)
7
const componentA = () => {
8
  const value = useSelector(valueSelector)
9
  return (
10
    // 또다른 View code
11
    <View></View>
12
  )
13
}

1
const SomeContext = createContext()
2

3
const componentA = () => {
4
  return (
5
    // 또다른 View code
6
    <SomeContext.Provider value={'testValue'}>{/* 값을 사용해야하는 컴퍼넌트들 */}</SomeContext.Provider>
7
  )
8
}

1
const componentB = () => {
2
  return (
3
    // 또다른 View code
4
    <SomeContext.Consumer>
5
      {context => {
6
        /* child에 있는 컴포넌트에서만 값 사용 가능 */
7
      }}
8
    </SomeContext.Consumer>
9
  )
10
}

1
const fontSize = atom({
2
  key: 'UNIQUE_KEY',
3
  value: {
4
    /* 상태 관리시 사용 할 value*/
5
  },
6
})
7

8
const componentA = () => {
9
  const [fontSize, setFontSize] = useRecoilState(myState)
10
  return /* View return */ <View></View>
11
}

1
const fontSizeLabelState = selector({
2
  key: 'UNIQUE_KEY',
3
  get: ({ get }) => {
4
    const fontSize = get(fontSizeState)
5
    return `fontSize is ${fontSize}`
6
  },
7
})
8

9
const componentA = () => {
10
  const fontSizeLabel = useRecoilValue(fontSizeLabelState)
11
}