22.10.28 React 7일차 / Redux

// Reudx

 

컴포넌트간의 공유가 더욱 쉬워진다.

 

store.js에 state를 보관하는 방법은 아래와 같다.

 

let user = createSlice({
    name : 'user',
    initialState : 'kim'
})

export default configureStore({
  reducer: { 
    user : user.reducer
  }
})

createSlice가 State같은 역활을 해준다. 이를 slice라고 부르는데 니 slice를 사용하기 위해서는 하단 configureStore의 문구에서 반드시 .reducer를 붙여주어야 활성화가 되기때문에 이점을 유의해야한다.

 

    let a = useSelector((state) => {return state})

해당문구를 사용하고 싶은 js 파일에서 입력해주면 store에 있는 컴포넌트들을 사용할 수 있다.

 

let a = useSelector( (state) => {return state})

 

표시된 state에는 store에 해당하는 모든 컴포넌트를 받아오기 때문에, return에서 가져올 state를 정할 수 있다.

 

공유가 필요없는 state경우는 해당 페이지에서 useState를 사용하는 것이 좋다.

 

/ Redux에 state 변경법

 

state에 수정해주는 함수를 만든 후, 원할때에 그 함수를 실행해 달라는 요청을 보내야한다.

 

let user = createSlice({
    name : 'user',
    initialState : 'kim',
    reducers : {
        changeName(state) {
            return 'john kim'
        }
    }
})

해당 Slice에 reducers를 추가하여 return 값을 주면된다. 기존 state값을 남기고 싶다면 해당 함수 () 내부에 state를 넣어주면 기존 state값을 넣는 뜻임

 

이 함수를 export해야 다른 곳에서 사용이 가능하다.

 

let user = createSlice({
    name : 'user',
    initialState : 'kim',
    reducers : {
        changeName(state) {
            return 'john kim'
        }
    }
})

export let { changeName } = user.actions

 

그 후, 사용하고자 하는 페이지파일에 가서 해당 함수를 따로 import를 해주어서 사용해야한다.

 

    let dispatch = useDispatch()

사용하고자 하는 페이지에서 dispatch를 적용시킨 후에, 해당 함수를 감싸서 사용하면 정상적으로 작동하는 것을 볼 수 있다.

 

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