Redux #5 redux 모듈 만들고 모아진 상태 확인해보기
- modules 폴더에 리듀서를 나눠서 작성한다.
- modules/index.js에서 combineReducers를 이용해서 reducer를 합쳐준다.(아래 예제에서 rootReducer)
- index.js에서 createStore에다가 파라미터로 합친 reducer를 전달해준다. 그렇게 만든 store를 Provider에 props으로 넣어준다.
modules/counter.js
// 액션 타입 선언
const SET_DIFF = 'counter/SET_DIFF';
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';
const initialState = {
number: 0,
diff: 1,
};
// 액션 생성 함수
export const setDiff = diff => ({ type: SET_DIFF, diff });
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });
// reducer
export default function counter(state = initialState, action) {
switch (action.type) {
case INCREASE:
return {
...state,
number: state.number + state.diff,
};
case DECREASE:
return {
...state,
number: state.count - state.diff,
};
case SET_DIFF:
return {
...state,
diff: action.diff,
};
default:
return state;
}
}
modules/todos
const ADD_TODO = 'todos/ADD_TODO';
const TOGGLE_TODO = 'todos/TOGGLE_TODO';
let nextId = 1;
export const addTodo = text => ({
type: ADD_TODO,
todo: {
id: nextId++,
text,
},
});
export const toggleTodo = id => ({
type: TOGGLE_TODO,
id,
});
const initialState = [
// {
// id: 1,
// text: 'text',
// done: true
// }
];
export default function todos(state = initialState, action) {
switch (action.type) {
case ADD_TODO:
return [...state, action.todo];
case TOGGLE_TODO:
return state.map(item => (item.id === action.id ? { ...item, done: !item.done } : item));
default:
return state;
}
}
modules/index.js
import { combineReducers } from 'redux';
import counter from './counter';
import todos from './todos';
const reducer = combineReducers({ counter, todos });
export default reducer;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './modules';
const store = createStore(rootReducer);
console.log(store.getState()); // 객체 안에 만든 상태 2개가 들어가있는 것을 볼 수 있다.
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
Author And Source
이 문제에 관하여(Redux #5 redux 모듈 만들고 모아진 상태 확인해보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@joker77z/Redux-5-redux-모듈-만들고-모아진-상태-확인해보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)