Redux 모범 사례 2021 - Redux Cool
10442 단어 reactreduxbestpracticereduxcool
긴장하지 않고 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
을 만듭니다.
npm install redux redux-cool
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
"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
// }
// }
이머 라이브러리 자원
Reference
이 문제에 관하여(Redux 모범 사례 2021 - Redux Cool), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/reactjsfan/redux-best-practice-2021-redux-cool-5g86텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)