[React] redux

상태 관리 라이브러리
state를 관리해주는 툴
 
props vs state
props
property의 줄임말
컴포넌트 간에 주고 받을 때는 Prop 이용
부모 -> 자식 컴포넌트 같이 위에서 아래로만 소통 가능
부모 컴포넌트가 자식 컴퓨터로 전달한 값을 자식 컴포넌트는 바꿀 수 x, 바꾸고 싶다면 부모에서 다시 내려줘야 함
state
부모 -> 자식으로 주는게 아니라 한 컴포넌트 안에서 데이터 교환, 전달해야할 때 사용
한 컴포넌트 안에서 언제든지 값 변경 가능
state이 2에서 3으로 변하면 re-rendering됨
 
컴포넌트 안의 컴포넌트 안의 컴포넌트 같이 여러개가 있다고 가정하면
redux가 없을 경우는 바로 위의 상위의 컴포넌트와만 소통 가능 => 최상위로 전달하기 위해서는 하나씩 올라가며 전달해야 함
하지만 Redux를 사용하면 최상위로 바로 전달 가능
 
Redux를 사용하려면 dependency가 필요함

npm install redux react-redux redux-promise redux-thunk --save

Redux를 잘 쓸 수 있게 도와주는 역할
 
액션은 객체 형식이어야 스토어가 받을 수 o, 근데 항상 객체형식으로만 받는게 아니라 promise나 function형식으로 된 걸 받을 경우도 있음 => thunk는 디스패치한테 function을 받는 방법을 알려주고, promise는 디스패치한테 promise를 받는 방법을 알려주기 위한 미들웨어

import { Provider } from 'react-redux';
import ReduxThunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise';


//redux의 store는 객체밖에 못 받음, but promise와 function도 받을 수 있게 하기 위함
const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
//   <React.StrictMode>
    <Provider
      store={createStoreWithMiddleware(Reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__ ()
      )}>
      <App />
    </Provider>
    
//   </React.StrictMode>
);

여기서 window.__REDUX_DEVTOOLS_EXTENSION__ 를 사용하려면 크롬 확장프로그램에서
아래의 확장 프로그램을 설치해줘야 함

 

// client/src/_reducers/index.js

import { combineReducers } from "redux"; //s
import user from './user_reducer';

const rootRedudcer = combineReducers({
	// user
})

export default rootRedudcer;

스토어가 있고 reducer들이 여러가지가 있음, 어떻게 state가 변하는지 보여준 다음 마지막 값을 리턴시켜주는게 reducer
여러가지 reducer들을 combine reducer를 이용해 root reducer에서 하나로 합쳐줌
User reducer는 user_reducer.js에 적어넣으면 됨
 
리덕스 연결 완료