react - Redux

Sarah·2022년 3월 23일

명령 흐름=(data 흐름과 같은 말이겠죠?)

login.js--(dispatch(action)-->action --->reducer-->store

작성 흐름

  1. store 생성한다.
  2. store에 값을 어떻게 변경시킬지를 작성한다 = action작성
  3. action을 store에 전달시켜줄 reducer를 작성한다.
    (action은 store에 곧바로 배송이 안된다. reducer를 거쳐야만 한다.)
  4. store에 작성된 reducer를 저장한다.
  5. 예로 login페이지에서 사용자 정보 저장하려면 login페이지에 가서 dispatch(action)을 작성한다. => dispatch(actions) = 액션을 실행시켜 라는 뜻.

1. store 생성

index.js에서 작성

import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './App'
//여기 
import { Provider } from 'react-redux' 
import createStore from './createReduxStore' 

const store = createStore() //store 생성

ReactDOM.render(
  <Provider store={store}> // App컴포넌트는 이제 store에 접근가능하다. = Provider에 감싸진 컴포넌트들은 store에 접근가능하다.
    <App />
  </Provider>,
  document.getElementById('root')
)```

profile
2021.06 ~

0개의 댓글