긴장하지 않고 redux 로직을 구축하세요 ❤️

설명

Redux Cool은 redux 로직을 쉽고 직관적으로 작성할 수 있는 아주 작은 패키지입니다. 두 개의 개별 라이브러리 모음입니다. 하나는 감속기 기능을 생성하고 다른 하나는 작업 객체를 생성하도록 설계되었습니다.

감속기 생성기 설치

npm install redux redux-cool

액션 생성자 시작하기

src/accountReducer.js이라는 파일을 생성합니다.

src/accountReducer.js

import {reducersCreator} from "redux-cool"

const initialState = {
    profile: {
        data: null
    }
}

const reducerTree = {

    PROFILE: {

        SET: (state, action) => {
            const [data] = action.args
            state.profile.data = data
        },

        UPDATE_EMAIL: (state, action) => {
            const [email] = action.args
            state.profile.data.email = email
        }
    },

    CLEAR: (state, action) => {
        state.profile.data = null
    }

}

const accountReducer = reducersCreator(
    "ACCOUNT",
    initialState,
    reducerTree,
)

export default accountReducer

위의 예에서 볼 수 있듯이 accountReducer 함수를 호출하고 세 개의 인수를 전달하여 reducersCreator을 만듭니다.

"ACCOUNT" : 감속기의 이름입니다. String이면 됩니다.

initialState : 감속기의 초기 상태입니다. Object이면 됩니다.

reducerTree : 직관적이고 읽기 쉬운 방식으로 감속기에 대해 Object을 정의하는 handler functions(깊고 중첩된 구조를 가질 수 있음)입니다. Handler functions은 state과 action을 인수로 받아 상태를 업데이트합니다. 자동으로 을 사용하여 state.profile.data.email = email 과 같은 일반 변경 코드로 변경할 수 없는 업데이트를 수행합니다. 변경할 수 없는 업데이트를 수동으로 수행하고 결과를 반환할 필요가 없습니다. 에 대해 잘 모르시는 분들은 꼭 보세요. 매우 중요합니다.

결과적으로 다음 유형의 작업을 처리할 수 있는 accountReducer 함수를 얻습니다.

유형: "PROFILE/SET" 또는 "ACCOUNT/PROFILE/SET"

유형: "PROFILE/UPDATE_EMAIL" 또는 "ACCOUNT/PROFILE/UPDATE_EMAIL"

유형: "CLEAR" 또는 "ACCOUNT/CLEAR"

보시다시피 각 핸들러는 두 가지 유형의 작업을 수행할 수 있습니다. 하나는 reducerTree에 설명된 경로로 구성되고, 두 번째는 "CLEAR" 및 "ACCOUNT/CLEAR"과 같이 처음부터 추가해야 하는 첫 번째 유형에 리듀서 이름을 더한 것과 같습니다. 이것이 이 라이브러리의 가장 중요하고 유용한 기능입니다.

이머 라이브러리 두 경우 모두( "CLEAR" 및 "ACCOUNT/CLEAR" ) CLEAR 핸들러는 accountReducer에서 호출되지만 CLEAR 핸들러가 있는 여러 리듀서가 있고 모든 리듀서의 상태를 지워야 하는 경우 " CLEAR" 작업 유형이지만 ACCOUNT 감속기 상태만 삭제해야 하는 경우 "ACCOUNT/CLEAR" 작업 유형을 사용해야 합니다.

이제 accountReducer가 있으므로 redux 저장소를 생성해 보겠습니다.

src/store.js라는 파일을 만듭니다.

src/store.js

import {createStore} from "redux"
import {actionsCreator} from "redux-cool"
import accountReducer from "./accountReducer.js"

// Create Store
const store = createStore(accountReducer)

// Dispatch Set Profile Action
store.dispatch(actionsCreator.PROFILE.SET({
        email: 'test@test',
        name: 'Test'
    })
)
console.log(store.getState())
// {
//     profile: {
//         data: {email: 'test@test', name: 'Test'}
//     }
// }


// Dispatch Update Email Action
store.dispatch(actionsCreator.PROFILE.UPDATE_EMAIL('test2@test2'))
console.log(store.getState())
// {
//     profile: {
//         data: {email: 'test2@test2', name: 'Test'}
//     }
// }



// Dispatch Clear Email Action
store.dispatch(actionsCreator.CLEAR())
console.log(store.getState())
// {
//     profile: {
//         data: null
//     }
// }

이머 라이브러리 자원