Redux Toolkit 에 대해 알아보기.

개요.

공식에서 권장하는 Redux Toolkit 을 위주로 차근히 정리 노트를 써나가보고자 합니다.

현재는 개인 전용 정리 노트에 가까운 분위기 이므로, 향후 한글과 함께 정돈 해 나가고자 합니다.

 

한계.

이 글은 지속적으로 업데이트 될 예정입니다. 일부 부정확한 정보가 있을 수 있습니다.

 

준비물.

# NPM
npm install @reduxjs/toolkit

 

주요 개념

Reducer:

REDUCER: In redux, the reducers are the pure functions that contain the logic and calculation that needed to be performed on the state. These functions accept the initial state of the state being used and the action type. It updates the state and responds with the new state.

 

Reducers are functions that take the current state and an action as arguments, and return a new state result. 

 

action.payload:

The second one is “payload”, Payload stores the additional information about what happened. It is not a compulsion to include “payload” in the object. It is entirely up to you but we should always try to pass only the necessary information to the action object and try to keep it as light as possible.

const Actions = {
 type: '',
 payload: ''
}

However, payload can be used as follows too:

const mondstadt = createSlice({
	name: 'knights of favonius',
    initialState,
    reducers: {
    	signed: (state) => {
        	state.numOfKnights--
        },
        ready: (state, action) => {
        	state.numOfKnights += action.payload
        },
    },
})

module.exports = favoniusSlice.reducer
module.exports.favoniusActions = favoniusSlice.actions