Redux: "combineReducers"에 λŒ€ν•œ API λ¬Έμ„œμ— μ„€λͺ…λœ 예제의 μ½”λ“œ 였λ₯˜?

에 λ§Œλ“  2016λ…„ 04μ›” 14일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: reduxjs/redux

"combineReducers" API λ¬Έμ„œμ˜ μΌλΆ€λ‘œ μ„€λͺ…λœ μ˜ˆμ œμ—μ„œ μŠ€ν† μ–΄ 생성 μ‹œ λ§€κ°œλ³€μˆ˜λ‘œ "reducer"κ°€ " app.js "( let store = createStore(reducer) ) 파일의 createStore에 μ „λ‹¬λ©λ‹ˆλ‹€.

κ·ΈλŸ¬λ‚˜ " reducers/index.js "μ—μ„œ ν•¨μˆ˜ 이름은 "reducer"κ°€ μ•„λ‹ˆλΌ "combineReducers"μž…λ‹ˆλ‹€( export default combineReducers({..}) ).

λ”°λΌμ„œ μŠ€ν† μ–΄ 생성 μ‹œ λ§€κ°œλ³€μˆ˜κ°€ "combineReducers"(예: let store = createStore(combineReducers ))둜 μ „λ‹¬λ˜μ–΄μ„œλŠ” μ•ˆ λ©λ‹ˆκΉŒ?

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λ‚˜λŠ” μ•„λ‹ˆλΌκ³  말할 것이닀. 생각해보면 Reduxμ—λŠ” 감속기 κΈ°λŠ₯이 ν•˜λ‚˜λ§Œ μžˆμŠ΅λ‹ˆλ‹€. 이 μ˜ˆμ œκ°€ combineReducers λ₯Ό μ‚¬μš©ν•˜μ—¬ ν•΄λ‹Ή κΈ°λŠ₯을 μƒμ„±ν•œλ‹€λŠ” 사싀은 κ΅¬ν˜„ μ„ΈλΆ€ μ‚¬ν•­μž…λ‹ˆλ‹€. app.js 에 κ΄€ν•œ ν•œ, ν•΄λ‹Ή ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ 무슨 일이 μΌμ–΄λ‚˜κ³  μžˆλŠ”μ§€, μ–΄λ–»κ²Œ μƒμ„±ν–ˆλŠ”μ§€ λ˜λŠ” 무엇을 ν•˜κ³  μžˆλŠ”μ§€ μ•Œμ§€ λͺ»ν•˜κ±°λ‚˜ μ‹ κ²½ 쓰지 μ•ŠμŠ΅λ‹ˆλ‹€.

λ˜ν•œ reducers/index.js κ°€ export default combineReducers({}) λ₯Ό μˆ˜ν–‰ν•  λ•Œ μ‹€μ œλ‘œ "combineReducers"λΌλŠ” 이름을 _λ§Œλ“œλŠ”_ 것은 μ•„λ‹™λ‹ˆλ‹€. "이 ν•¨μˆ˜ 호좜의 κ²°κ³Όλ₯Ό κ°€μ Έ μ™€μ„œ κΈ°λ³Έ λ‚΄λ³΄λ‚΄κΈ°λ‘œ μ„€μ •ν•˜μ‹­μ‹œμ˜€."라고 λ§ν•©λ‹ˆλ‹€. 사싀, 기술적으둜 κ·Έ 좜λ ₯μ—λŠ” κ΄€λ ¨λœ μ‹€μ œ λ³€μˆ˜ 이름쑰차 μ—†μŠ΅λ‹ˆλ‹€.

λ§ˆμ§€λ§‰μœΌλ‘œ export default λ₯Ό μˆ˜ν–‰ν•  λ•Œ κΈ°λ³Έ 내보내기가 μ–΄λ–€ νŒŒμΌμ„ κ°€μ Έμ˜€λ“  둜컬 λ³€μˆ˜μ— μ›ν•˜λŠ” 이름을 지정할 수 μžˆλ‹€λŠ” 점에 μœ μ˜ν•˜μ‹­μ‹œμ˜€. 톡화 μ‚¬μ΄νŠΈ. 예:

function someFunction(a, fred, randomVariableName) {}

const firstVariable = 1;
const theMeaningOfLife = 42;
const aTotallyUselessName = "Whatever";

someFunction(firstVariable, theMeaningOfLife, aTotallyUselessName);

ν•¨μˆ˜ μ™ΈλΆ€μ—μ„œ μ •μ˜ν•œ λ³€μˆ˜ 이름이 ν•¨μˆ˜ λ‚΄λΆ€μ˜ λ§€κ°œλ³€μˆ˜ 이름과 μΌμΉ˜ν•  ν•„μš”κ°€ μ—†λ‹€λŠ” 점에 μœ μ˜ν•˜μ‹­μ‹œμ˜€.

λ§ˆμ°¬κ°€μ§€λ‘œ 내보낼 λ•Œ:

// fileA.js
export default const aThing = 42;

// fileB.js
import iCanGiveThisAnyNameIWant from "fileA";

λͺ¨λ“  3 λŒ“κΈ€

λ‚˜λŠ” μ•„λ‹ˆλΌκ³  말할 것이닀. 생각해보면 Reduxμ—λŠ” 감속기 κΈ°λŠ₯이 ν•˜λ‚˜λ§Œ μžˆμŠ΅λ‹ˆλ‹€. 이 μ˜ˆμ œκ°€ combineReducers λ₯Ό μ‚¬μš©ν•˜μ—¬ ν•΄λ‹Ή κΈ°λŠ₯을 μƒμ„±ν•œλ‹€λŠ” 사싀은 κ΅¬ν˜„ μ„ΈλΆ€ μ‚¬ν•­μž…λ‹ˆλ‹€. app.js 에 κ΄€ν•œ ν•œ, ν•΄λ‹Ή ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ 무슨 일이 μΌμ–΄λ‚˜κ³  μžˆλŠ”μ§€, μ–΄λ–»κ²Œ μƒμ„±ν–ˆλŠ”μ§€ λ˜λŠ” 무엇을 ν•˜κ³  μžˆλŠ”μ§€ μ•Œμ§€ λͺ»ν•˜κ±°λ‚˜ μ‹ κ²½ 쓰지 μ•ŠμŠ΅λ‹ˆλ‹€.

λ˜ν•œ reducers/index.js κ°€ export default combineReducers({}) λ₯Ό μˆ˜ν–‰ν•  λ•Œ μ‹€μ œλ‘œ "combineReducers"λΌλŠ” 이름을 _λ§Œλ“œλŠ”_ 것은 μ•„λ‹™λ‹ˆλ‹€. "이 ν•¨μˆ˜ 호좜의 κ²°κ³Όλ₯Ό κ°€μ Έ μ™€μ„œ κΈ°λ³Έ λ‚΄λ³΄λ‚΄κΈ°λ‘œ μ„€μ •ν•˜μ‹­μ‹œμ˜€."라고 λ§ν•©λ‹ˆλ‹€. 사싀, 기술적으둜 κ·Έ 좜λ ₯μ—λŠ” κ΄€λ ¨λœ μ‹€μ œ λ³€μˆ˜ 이름쑰차 μ—†μŠ΅λ‹ˆλ‹€.

λ§ˆμ§€λ§‰μœΌλ‘œ export default λ₯Ό μˆ˜ν–‰ν•  λ•Œ κΈ°λ³Έ 내보내기가 μ–΄λ–€ νŒŒμΌμ„ κ°€μ Έμ˜€λ“  둜컬 λ³€μˆ˜μ— μ›ν•˜λŠ” 이름을 지정할 수 μžˆλ‹€λŠ” 점에 μœ μ˜ν•˜μ‹­μ‹œμ˜€. 톡화 μ‚¬μ΄νŠΈ. 예:

function someFunction(a, fred, randomVariableName) {}

const firstVariable = 1;
const theMeaningOfLife = 42;
const aTotallyUselessName = "Whatever";

someFunction(firstVariable, theMeaningOfLife, aTotallyUselessName);

ν•¨μˆ˜ μ™ΈλΆ€μ—μ„œ μ •μ˜ν•œ λ³€μˆ˜ 이름이 ν•¨μˆ˜ λ‚΄λΆ€μ˜ λ§€κ°œλ³€μˆ˜ 이름과 μΌμΉ˜ν•  ν•„μš”κ°€ μ—†λ‹€λŠ” 점에 μœ μ˜ν•˜μ‹­μ‹œμ˜€.

λ§ˆμ°¬κ°€μ§€λ‘œ 내보낼 λ•Œ:

// fileA.js
export default const aThing = 42;

// fileB.js
import iCanGiveThisAnyNameIWant from "fileA";

@markerikson μ΄λŸ¬ν•œ ν›Œλ₯­ν•œ 닡변에 κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€.

@markerikson 정말 κ°μ‚¬ν•©λ‹ˆλ‹€.

React에 λŒ€ν•œ 지식을 λΉΌκ³  JQuery와 ν•¨κ»˜ Reduxλ₯Ό μ‚¬μš©ν•˜λŠ” 방법을 배우고 μžˆμŠ΅λ‹ˆλ‹€. κ·€ν•˜μ˜ 닡변은 이제 React μ½”λ“œμ˜ 예제λ₯Ό 더 잘 μ΄ν•΄ν•˜λŠ” 데 도움이 λ©λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰