React. Redux
react state 상태관리 / props 대신 사용할 수 있는 라이브러리
global state 유지를 쉽게 할 수 있다.
최상위 컴포넌트에서 최하위 컴포넌트까지 값 전달을 한번에 할 수 있다.
/* ⊙ redux install */
yarn add redux react-redux
/* ⊙ import */
import { Provider, connect, useDispatch, useSelector } from 'react-redux';
import { combineReducers, createStore } from 'redux';
/* ⊙ reducer 셋팅 */
let 초기값 = 0;
function reducer(state = 초기값, 액션){
// state : return 해줄 값
// 액션 : 해당 redux를 사용하는 컴포넌트에서 전달 받을 인자
// (...)
// 상황에 맞는 로직을 넣고 state를 return 해주면된다.
}
/* ⊙ reducer 저장 */
let store = createStore(combineReducers({reducer}));
/* ⊙ Provider 감싸기 */
<Provider store={store}>
// redux를 사용할 컴포넌트를 감싼다.
<App />
</Provider>
/* ⊙ redux state 사용법 */
// state를 props화 하는 함수
function reduxFnc(state){
return{
list : state.reducer
}
}
// 컴포넌트 하단 변경
export default connect(reduxFnc)(Detail)
/* ⊙ 컴포넌트 → reducer 값 전달 */
// reducer의 액션 매개변수로 값 전달
props.dispatch({type : 'add', payload : obj})
useDispatch 는 React.useContext 으로 Provider 에서 정의한 contextValue 를 가져와 store.dispatch 를 반환한다.
useSelector 는 selector Callback 을 전달하여, 필요한 값을 가져올 수 있다.
// state에는 모든 reducer가 담겨있다.
let state = useSelector((state) => state);
export default connect(함수명)(컴포넌트명) → export default 컴포넌트명;
// dispatch 해당 객체에 reducer에 전달할 값을 지정할 수 있다.
let dispatch = useDispatch();
const 초기값 = { count : 0, user : 'kim' };
const counterSlice = createSlice({
name: 'counter',
initialState: 초기값,
reducers: {
증가 (state){
state.count += 1;
},
감소 (state){
state.count -= 1;
}
}
})
let store = configureStore({
reducer: {
counter : counterSlice.reducer
}
})
export let {증가, 감소} = counterSlice.actions
// 사용
const reduxUse = useSelector((state :RootState) => state );
const dispatch :Dispatch = useDispatch();
{reduxUse.counter.user}
dispatch(증가())