By a3040, Published on Invalid Date
Redux - A predictable state container for JavaScript apps. | Redux
react에서 redux 사용하는 기본 구조입니다.
forgithub00/redux_1 at master · a3040/forgithub00
Redux는 JavaScript 애플리케이션에서 상태 관리를 위한 도구입니다.
React와 함께 많이 사용되며, React에서 컴포넌트 간에 상태를 공유하고 업데이트하기 위한 상태 관리 방법으로 Redux를 많이 사용합니다.
중요한 메소드는 다음과 같습니다.
createStore(reducer, [preloadedState], [enhancer]):
애플리케이션의 상태를 저장하고 업데이트하는 스토어를 생성합니다. reducer는 액션에 따라 상태를 업데이트하는 함수이며, preloadedState는 초기 상태값을 나타내며 선택적으로 전달될 수 있습니다. enhancer는 미들웨어와 같은 스토어의 기능을 확장하는 함수입니다.
combineReducers(reducers):
다수의 리듀서를 하나로 합쳐줍니다. 이를 통해 하나의 애플리케이션 상태를 여러 개의 작은 리듀서로 나눌 수 있습니다.
dispatch(action):
액션을 발생시킵니다. 액션은 객체 형태로 {type: 'ACTION_TYPE', payload: ...}와 같은 형태로 구성됩니다. 리듀서는 이 액션에 따라 상태를 업데이트합니다.
getState():
스토어에 저장된 현재 상태를 반환합니다.
subscribe(listener):
스토어에 상태가 변경될 때마다 호출되는 콜백 함수를 등록합니다. 이를 통해 상태가 변경될 때마다 UI를 업데이트하거나, 상태 변경을 로그로 기록할 수 있습니다.
applyMiddleware(...middlewares):
미들웨어를 등록합니다. 미들웨어는 액션을 디스패치하기 전 또는 후에 추가적인 동작을 수행할 수 있습니다.
Redux Thunk와 같은 미들웨어를 사용하면 비동기 작업을 처리할 수 있습니다.
사용 방법
기본 뼈대를 생성하고 1.~4를 순서대로 진행하면서 필요한 action을추가 하고 사용합니다.
1. actions를 생성합니다
2. reducer를 생성합니다.
3. store를 생성합니다.
4. 사용합니다.
1. actions를 생성합니다
export const increment = () => {
return {
type: 'INCREMENT'
};
};
...
2. reducer를 생성합니다.
const initialState = {
count: 0
};
export const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
count: state.count + 1
};
...
default:
return state;
}
};
3. store를 생성합니다.
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { counterReducer } from './reducers';
const store = createStore(counterReducer);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
4. 사용합니다.
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement,multiply } from './actions';
function App() {
const [value, setValue] = useState(1);
const dispatch = useDispatch();
const count = useSelector(state => state.count);
const handleIncrement = () => {
dispatch(increment(value));
};
...
return (
<div>
<h1>Count: {count}</h1>
<input type="number" value={value} onChange={handleChange} />
<button onClick={handleIncrement}>Increment</button>
<button onClick={handleDecrement}>Decrement</button>
<div>
<label>
Multiply by:
</label>
<button onClick={handleMultiply}>Multiply</button>
</div>
</div>
);
}
export default App;