Redux 모범 사례 2021 - Redux Cool

긴장하지 않고 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 functionsstateaction을 인수로 받아 상태를 업데이트합니다. 자동으로 을 사용하여 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
    //     }
    // }
    
    


    이머 라이브러리 자원



  • 좋은 웹페이지 즐겨찾기