[ReactJS] 상태관리 라이브러리 Redux / store 와 connect()()

2021.05.25 - [내가 공부하는것/JavaScript] - [ReactJS] 상태관리 라이브러리 Redux / 설치와 적용법

[ReactJS] 상태관리 라이브러리 Redux / 설치와 적용법

 

위 글에서 reducer 와 action, type 설정을 했었다.

이에 이어서 store 를 설정하고 실제 프로젝트에 적용시켜보며 chorme 에서 Redux 의 상태를 볼 수 있는 방법을 알아보자.

 

 

---

 

 

  store

 

redux/store

import { createStore } from "redux";
import userReducer from './user/userReducer'


const store = createStore( userReducer )

export default store

 

store 는 이런식으로 작성해주면 좋다.

user디렉토리 안에 있는 userReducer에 접근하여 해당 파일 안에 있는 모듈을 가져와 store 를 생성한다.

 

이렇게 생성된 store 를 Provider 를 통해서 실제 컴포넌트에 적용을 할 수 있다.

여러 컴포넌트에서 사용이 되기에, index.js 혹은 App.js 에 적용해주는것이 좋다.

 

필자는 App.js 에 적용을 해 보겠다.

 

src/App.js

import {Provider} from "react-redux";
import { store } from './redux/store';

function App() {
  return (
    <div className="App">
      <Provider store={store}>
              <BrowserRouter>
                  <Switch>
                      <Route exact path='/' component={Home}/>
                      <Route path='/about' component={About}/>
                  </Switch>
              </BrowserRouter>
      </Provider>
    </div>
  );
}

 

이런식으로 보여주는곳을 모두 <Provider></Provider> 태그로 묶어주고,

이 Provider 의 store 속성에 우리가 위에서 만든 store 를 넣어준다.

 

이렇게 되면 모든 컴포넌트에서 사용을 할 수 있다.

 

 

connet()()

 

이제 Home 컴포넌트에서 작업을 해보고자 한다.

 

const Home = () => {
	reutrn(
    	<div>
        </div>
    )
}

export default Home

이와같은 Home 파일 안에서 작업을 해 줄것이다.

 

바로, react-router 에서 지원하는 connect 를 이용해 적용을 할 것이다.

import {connect} from "react-redux"

const Home = () => {
	reutrn(
    	<div>
        </div>
    )
}

export default connect()(Home)

위와같이 작성을 해주면 진짜 모든 준비가 끝났다고 할 수 있다.

 

여기서 우리가 알아야 할 두가지를 알아보자

 

1. mapStateToProps

2. mapDispatchToProps

 

이 두가지 인데, 여기서 1번은 redux 에서 가지고있는 상태값을 가져오는 방법이며,

2번은 redux 에서 가지고 있는 action들이다.

 

import {connect} from "react-redux"

const Home = ( {data} ) => {
	reutrn(
    	<div>
        </div>
    )
}

const mapStateToProps = state => {
	return{
    	data : state
    }
}

export default connect(mapStateToProps)(Home)

이런식으로 작성을 해주면 Props 에 redux에서 가져온 state 값을 data  에 담아서 뿌려준다.

여기서 꼭 connect의 첫번째 () 안에는 mapStateToProps 를 넣어준다.

 

그리고, 값 변경을 하기 위한 dispatch와 action도 추가해 보겠다.

import {connect} from "react-redux"
import {saveUser} from "./redux/user/action.js"

const Home = ( {data, saveUser} ) => {
	reutrn(
    	<div>
        </div>
    )
}

const mapStateToProps = state => {
	return{
    	data : state
    }
}

const mapDispatchToProps = { saveUser }

export default connect(mapStateToProps, mapDispatchToProps)(Home)

이렇게 mapDispatchToProps를 제작하여 여기 안에 우리가 실행하고자 하는 action 들을 넣어주면 된다.

그리고, connect의 매개변수에 꼭 mapDispathToProps를 추가해준다.

 

이렇게 하면 props로 redux를통해 저장된 값이 넘어오거나 dispatch를 할 수 있게 된다.