React redux

Redux

props없이 state를 공유할 수 있게하는 라이브러리

설치

yarn add @reduxjs/toolkit react-redux

셋팅

store.js파일을 만들어서 아래처럼 세팅한다.

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

그리고 index.js에서 Provider컴포넌트와 위처럼 작성한 store.js를 import한다.

import { Provider } from "react-redux";
import store from './store.js'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
); 

이렇게 작성하면 App을 비롯한 모든 컴포넌트들은 store.js에서 state를 마음껏가져가서 사용이 가능하다.

store에 state보관하는 법

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

// 1. createSlice()로 state를 만들고
const user = createSlice({
  name : 'user',
  initialState : [
    {id : 0, name : 'jang', age : 21},
    {id : 2, name : 'kim', age : 14}
  ]
})

// 2. configureStore()안에 등록
export default configureStore({
  reducer: {
    user : user.reducer
  }
}) 

1. createSlice를 import하고
   { name: 'stateName', initialState: "state값" } 이런 방식으로 state를 하나 생성한다.
   createSlice는 useState와 비슷하게 사용한다.

2. configureStore() 안에 state를 등록하면 된다.
   { 작명 : createSlice로 만든 stateName.reducer } 이런 방식으로 등록한다.

store.state 사용법

컴포넌트 파일에서

state.user[i].name

와 같이 사용한다.

store state 변경

state 수정 함수를 store.js에 만들고 그 함수를 컴포넌트에서 원할 때 실행하는 방식으로 사용한다.

1. store.js 안 state 수정함수
   slice내부에 reducer: { }안에 함수를 넣는다.
   파라미터 하나 작명시 그건 기존 state가 된다.
   return 우측에 새로운 state 입력시 그걸로 기존 state를 바꾼다.

const user = createSlice({
  name : 'user',
  initialState : [
    {id : 0, name : 'jang', age : 21},
    {id : 2, name : 'kim', age : 14}
  ],
  reducers : {
    changeName(state){
      return 'john ' + state
    }
  }
})

2. 다른곳에서 사용 가능하도록 export
   아래와 같은 코드를 밑에 추가하고
   slice이름.acrions라고 적으면 state변경함수가 그 자리에 출력된다. 변수에 저장 후 export

export let { changeName } = user.action

3. 사용시 import해 사용
   dispatch()로 감싸서 사용해야 한다.
   store.js에서 원하는 함수 가져와서 useDispatch를 사용해 그 함수를 실행하면 그 함수가 작동하면 state를 변경한다.

사용하는 컴포넌트

import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"

(생략) 

<button onClick={()=>{
  dispatch(changeName())
}}>버튼</button> 

redux state가 array/object인 경우 변경하려면

아래와 같이 state변경함수를 작성한다.

const user = createSlice({
  name : 'user',
  initialState : [
    {name : 'jang', age : 21},
    {name : 'kim', age : 14}
  ],
  reducers : {
    changeName(state){
      return {
        state.name = 'park'
    }
  }
})

위 처럼 간단한 방식으로 state변경 함수를 구성 할 수 있다.
이러한 방식때문에 state를 한가지만 만들어도 redux에서는 object나 array에 담는 경우가 있다.

reducers 파라미터

  reducers : {
    changeName(state, action){
      return {
        state.name = action
    }
  }

위 코드같은 방식으로 파라미터를 작성하면
changeName('jang')이런식으로 파라미터 전달이 가능한 함수 구성이 가능하다.

• a 말고 action 이런 식으로 작명 많이 합니다.
• action.type 하면 state변경함수 이름이 나오고
• action.payload 하면 파라미터가 나옵니다.