[09]SocialGallery Project - Redux Toolkit

Redux Toolkit

Redux toolkit이란?

https://velog.io/@swch56/07-React-Redux-toolkit

Redux toolkit쓰는 이유

• redux store값을 가져와 계산을해 redux가 적은 양의 필요한 데이터만 가지고 있게 도와준다.
• 구조가 바뀌어도 연관된 컴포넌트를 바꿀필요없이 Seletor만 바꾸면 됨
• 메모되어 재계산 방지 효율적

1) 설치

npm install @reduxjs/toolkit react-redux

2) App.js에 코드 추가

import { Provider } from 'react-redux';
import store from 'store경로';

<Provider store={store}>
  <App />
</Provider>

3) store파일 구성

import { configureStore, createSlice } from '@reduxjs/toolkit';

const a = createSlice({
  name: 'name'
  initialState: 'choi',
  reducers: {
  	test(state, action) {
    }
  }
})

export default configureStore({
  reducer: {
  	name: name.reducer
  },
});

name : store의 값
initialState : 초기값
reducers : 처리하려는 메소드 (첫 parameter는 initialState고 두 번째는 변경하려는 값)

4) Parameter이용시 action.payload이용

const count = createSlice({
  name: 'cnt'
  initialState: 0,
  reducers: {
    addCnt(state, action) {
      state += action.payload //state는 현재 값, action은 parameter로 넘겨줄 값
    }
  }
})

---