[react]redux정리

redux 공부한 내용 정리

 

- redux사용하면 컴포넌트들이 prps없이 state공유가능

 

설치

npm install @reduxjs/toolkit react-redux

 

-store.js 생성 및 문법

import { configureStore } from '@reduxjs/toolkit'

 

//state하나당 한세트
let user = createSlice({

  name: 'user', //state명

  initialState: 'kim' //state값

}) //userState같은거

 

//state가 array, object일때
let user2 = createSlice({
  name: 'user2',
  initialState: {
    name: 'jhon',
    age: 25
  },

//수정을 위한 함
reducers: {
  changeName(state) {
    return {name: 'park', age:25}
    return state.name = 'park' //array object는 이방법이 가능해서 문자하나도 {}에 담는경우가있음
  },
  increase(state, a) {
    state.age += a.payload
  }
}
})

//익스포트
export let {changeName, increase} = user.actions //state변경함수 남음

 

 

//state 등록

export default configureStore({

  reducer: {

    user: user.reducer

  }

})

 

-index.js

<Provider store={store}></Provider>로 감싸준다

 

-각 컴포넌트에서 사용법

let a = useSelector((state)=>{ return state}) //모든 state
let a = useSelector((state)=> state.user) //특정state

 

-각 컴포넌트에서 변경함수 호출법

let dispatch = useDispatch();

dispatch(변경함수호출)

 

store.js 분할 할 시엔 빨간부분 따로 빼고 store.js 뺀부분 import해서 등록부분에 추가