Redux - A predictable state container for JavaScript apps. | Redux

Redux 시작하기 | 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;