TIL - Redux 기초

redux dir : 리덕스 관련 코드를 몰아넣음

     ㄴ modules dir : state의 그룹

     ㄴ config dir: 리덕스 설정 관련 파일 전부

           ㄴ configStore.js : 중앙 state 관리소 설정 코드

 

새로 바꾼 아이콘이 마음에 든다 ...

//configStore.js
import { createStore } from "redux";
import { combineReducers } from "redux";
import counter from "../modules/counter";

//app 전체에서 counter라는 reducer를 쓸 수 있음
const rootReducer = combineReducers({
  counter,
});
const store = createStore(rootReducer);

export default store;

 

 

//index.js
import { Provider } from "react-redux";
import store from "./redux/config/configStore";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>,
);

 

 

 

Store을 구성하는 것 = modules의 initial state + Reducers(state제어)

 

 

 

action.type은 유지보수를 위해 상수로 지정하기

// ./modules/counter.js
export const INCREASE = "INCREASE";
export const DECREASE = "DECREASE";

//App.js

import { INCREASE, DECREASE } from "./redux/modules/counter";

// ...

return (
    <div className="App">
      <button onClick={() => dispatch({ type: INCREASE })}>z+</button>
      <button onClick={() => dispatch({ type: DECREASE })}>-</button>
      현재 카운트: {data.counter.number}
    </div>
);

 

 

 

 

또는 action 객체를 return 하는 함수를 만들어서 export 해줘도 된다.

// ./modules/counter.js
export const increase = () => {
  return {
    type: "INCREASE",
  };
};

export const decrease = () => {
  return {
    type: "DECREASE",
  };
};