문제해결
여기는 일반적인 문제들과 그 해결책들을 공유하는 곳입니다. 예시는 React를 사용하지만, 다른 뭔가를 쓰더라도 유용할겁니다.
액션을 디스패치했는데 아무 일도 일어나지 않는다
액션을 디스패치하려 했지만 뷰가 바뀌지 않는 경우가 있습니다. 왜 그럴까요? 몇 가지 이유가 있을 수 있습니다.
리듀서의 인수들을 절대 변경(mutate)하지 마세요
Redux가 전달한
state나 action을 수정하고 싶어질 때가 있습니다. 그러지 마세요!Redux는 리듀서에 주어진 객체를 절대 변경하지 않을 것이라고 가정합니다. 언제나 새 상태 객체를 반환하세요. Immutable 같은 라이브러리를 사용하지 않더라도, 변경은 언제나 피해야 합니다.
예를 들어 아래와 같은 리듀서는 상태를 변경하기 때문에 틀렸습니다:
1
function todos(state = [], action) {
2
switch (action.type) {
3
case 'ADD_TODO':
4
// Wrong! This mutates state
5
state.push({
6
text: action.text,
7
completed: false
8
})
9
return state
10
case 'COMPLETE_TODO':
11
// Wrong! This mutates state[action.index].
12
state[action.index].completed = true
13
return state
14
default:
15
return state
16
}
17
}
Copied!
이렇게 고쳐야 합니다:
1
function todos(state = [], action) {
2
switch (action.type) {
3
case 'ADD_TODO':
4
// Return a new array
5
return [
6
...state,
7
{
8
text: action.text,
9
completed: false
10
}
11
]
12
case 'COMPLETE_TODO':
13
// Return a new array
14
return state.map((todo, index) => {
15
if (index === action.index) {
16
// Copy the object before mutating
17
return Object.assign({}, todo, {
18
completed: true
19
})
20
}
21
return todo
22
})
23
default:
24
return state
25
}
26
}
Copied!
코드는 더 많지만 이게 바로 Redux를 예측 가능하고 능률적으로 만들어줍니다. 코드를 더 줄이고 싶다면
React.addons.update과 같은 헬퍼를 써서 간단한 문법으로 불변형 변환을 작성할 수 있습니다:1
// Before:
2
return state.map((todo, index) => {
3
if (index === action.index) {
4
return Object.assign({}, todo, {
5
completed: true
6
})
7
}
8
return todo
9
})
10
11
// After
12
return update(state, {
13
completed: {
14
$set: true
15
}
16
}
17
})
Copied!
Object.assign을 올바르게 사용하도록 하세요. 예를 들어 리듀서에서 Object.assign(state, newData) 처럼 반환하는 대신 Object.assign({}, state, newData)처럼 반환해야 합니다. 이렇게 하면 이전의 state를 덮어쓰지 않게 됩니다.1
// Before:
2
return state.map((todo, index) => {
3
if (index === action.index) {
4
return Object.assign({}, todo, {
5
completed: true
6
})
7
}
8
return todo
9
})
10
11
// After:
12
return state.map((todo, index) => {
13
if (index === action.index) {
14
return { ...todo, completed: true }
15
}
16
return todo
17
})
Copied!
이 실험적인 언어 기능은 변경될 수 있음을 알아두세요.
중첩된 상태 객체가 깊게 복사되도록 주의하세요.
_.extend와 Object.assign 모두 상태를 얕게 복사합니다. 중첩된 상태를 어떻게 다룰지에 대한 제안은 중첩된 객체 업데이트하기에서 볼 수 있습니다.액션 생산자를 정의했다면, 이걸 호출한다고 자동으로 액션이 디스패치되지 않습니다. 예를 들어 이 코드는 아무것도 하지 않습니다:
TodoActions.js
TodoActions.js1
export function addTodo(text) {
2
return { type: 'ADD_TODO', text }
3
}
Copied!
AddTodo.js
AddTodo.js1
import React, { Component } from 'react'
2
import { addTodo } from './TodoActions'
3
4
class AddTodo extends Component {
5
handleClick() {
6
// Won't work!
7
addTodo('Fix the issue')
8
}
9
10
render() {
11
return (
12
<button onClick={() => this.handleClick()}>
13
Add
14
</button>
15
)
16
}
17
}
Copied!
액션 생산자는 단지 액션을 반환하는 함수일 뿐이기 때문에 이 코드는 작동하지 않습니다. 실제로 디스패치하는 것은 당신에게 달렸습니다. 서버에서 랜더링되는 앱의 경우 매 요청마다 별개의 스토어를 요구하기 때문에 액션 생산자를 정의하는 동안 특정 스토어 인스턴스에 바인드 할 수는 없습니다.
1
handleClick() {
2
// Works! (but you need to grab store somehow)
3
store.dispatch(addTodo('Fix the issue'))
4
}
Copied!
컴포넌트 계층의 깊은 곳까지 스토어를 전달하는 것은 번거로운 일입니다. react-redux가
connect 고차 컴포넌트를 써서 컴포넌트의 props에 dispatch를 주입해주는 이유입니다.수정된 코드는 아래와 같습니다:
AddTodo.js
AddTodo.js1
import React, { Component } from 'react'
2
import { connect } from 'react-redux'
3
import { addTodo } from './TodoActions'
4
5
class AddTodo extends Component {
6
handleClick() {
7
// Works!
8
this.props.dispatch(addTodo('Fix the issue'))
9
}
10
11
render() {
12
return (
13
<button onClick={() => this.handleClick()}>
14
Add
15
</button>
16
)
17
}
18
}
19
20
// In addition to the state, `connect` puts `dispatch` in our props.
21
export default connect()(AddTodo)
Copied!
이제 원한다면
dispatch를 다른 컴포넌트로 직접 내려줄 수도 있습니다.mapStateToProps가 정확한지 보세요
액션을 제대로 디스패치했고 리듀서를 잘 적용했지만 그에 대응하는 상태가 props로 제대로 전달되지 않았을 수도 있습니다.
다른것이 작동하지 않습니다
Last modified 3yr ago
Copy link