yarn add react-router-dom
yarn add firebase
yarn add redux redux-logger react-redux
Redux 설정
1. redux 를 이용하기 위해 Provider 의 아래에 위치.
// ./index.js
import { Provider } from 'react-redux';
...
ReactDOM.render(
<Provider>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
2. redux Folder 를 생성한다.
3. root.reducer.js 를 생성한다.
4. user Folder 를 생성한다.
5. user.reducer.js 를 생성한다.
// ./redux/user/user.reducer.js
// default value 를 설정.
const INITIAL_STATE = {
currentUser: null
}
/*
reducer 에서는 state 와 action 을 parameter 로 사용한다.
state 에는 현재의 state (current state) 를 담고 있다.
action 은 action 의 type 과 값을 담고 있는 payload 를 포함하고 있다.
*/
const userReducer = (state = INITIAL_STATE, action) => {
switch(action.type) {
case 'SET_CURRENT_USER':
return {
...state,
currentUser: action.payload
}
default:
return state;
}
}
export default userReducer;
6. root.reducer 에 user reducer 를 포함시킨다.
// ./redux/root.reducer.js
import { combineReducers } from 'redux';
import userReducer from './user/user.reducer';
// redux 내의 state 는 하나의 큰 json object 다.
// 생성한 Reducer 를 combineReducers 를 이용하여 관리한다.
export default combineReducers({
user: userReducer
});
7. store 를 생성하여 reducer 를 담는다.
// ./redux/store.js
import { createStore, applyMiddleware} from 'redux';
// redux code 디버깅시 유용한 middleware
import logger from 'redux-logger';
import rootReducer from './root.reducer';
// 사용할 middleware 를 등록
const middlewares = [logger];
// store 생성
const store = createStore(rootReducer, applyMiddleware(...middlewares));
export default store;
8. redux 의 Provider 에 store 정보를 설정한다.
// ./index.js
...
import store from './redux/store';
...
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
9. 이제 action 을 생성한다.
// ./redux/user/user.action.js
export const setCurrentUser = user => {
return ({
type: 'SET_CURRENT_USER',
payload: user
});
}
Redux 의 사용.
1. Redux 에 연결한다.
connect()
// ./App.js
...
import { connect } from 'react-redux';
...
// connect(mapStateToProps, mapDispatchToProps)(Component)
// 초기에는 전달할 mapStateToProps state 값이 없으므로 null 을 전달
export default connect(null, )(App);
2. action 을 Reducer 와 연결할 수 있도록 dispatch 에 action 을 넘겨준다.
// ./App.js
...
import { setCurrentUser } from './redux/user/user.actions';
...
class App extends React.Component {
...
something() {
setCurrentUser({
currentUser : {
id: snapShot.id,
...snapShot.data()
}
});
}
...
}
const mapDispatchToProps = dispatch => ({
setCurrentUser: user => dispatch(setCurrentUser(user))
})
//connect(mapStateToProps, mapDispatchToProps)(Component)
export default connect(null, mapDispatchToProps)(App);
3. 위 component 를 사용하는 상위 component 의 parameter 를 전달하는 부분을 삭제한다.
// ./App.js
<Header currentUser={this.state.currentUser} />
// =>
<Header />
4. 사용할 component 에서 redux 연결하기 위해 react-redux 의 connect 를 추가한다.
// state 를 사용할 component
import { connect } from 'react-redux';
...
const Header = ({ currentUser }) => {
return (
...
);
}
// 이름은 아무래도 상관없지만 mapStateToProps 이 redux code 표준.
// argument 로 사용되는 state 가 root reducer 의 state 다.
const mapStateToProps = (state) => ({
currentUser : state.user.currentUser
});
// 처음에는 root reducer 의 user state 가 없으므로 null 일 것이다.
export default connect(mapStateToProps)(Header);
Site 구축 연습 중에 정리차원의 지극히 개인적인 내용입니다.
행복한 고수되셔요.
woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
