Redux 상태가 자바 스크립트 객체로 업데이트되지 않습니다.

Question

나는이 저장소와 구성 요소와 내 상점에 넣으려는 객체 yeast을 가지고 있습니다. 그러나, 그것을 시도하고 저장할 때마다 작동하지 않습니다. 목적은 내가 콘솔 또는 아무것도에 오류가없는이

{ yeastType : value, temp: value}

Container.js

const mapDispatchToProps = (dispatch) => { 
    return { 
     handleYeastChange: (yeast) => { 
      dispatch(actions.updateYeast(yeast)) 
     } 
    } 
}; 

const RecipeYeastContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(RecipeYeast); 

Component.js

updateYeastState = (updatedYeast) => { 
    this.props.handleYeastChange(updatedYeast) 
}; 

것 같습니다. 내 redux 개발 도구를 열면 해당 작업이 호출 될 때까지 상태가 이미 업데이트되었음을 ​​알립니다. 그래서 오직 내 편지에 첫 글자가 저장됩니다. 그것은 결코 그것을 지속하지 않습니다. 정말 이상합니다. 그것도 결코 UI에 나타나지 않습니다. 내가 원하는만큼 입력하고 액션을 시작하고 상태는 첫 글자를 지키지 만 입력 내용에는 나타나지 않습니다.

이상한 점은 코드를 변경하여 yeastType과 temp을 속성 함수에 전달하고 거기에 객체를 생성한다는 것입니다.

이 작동 (아래 참조) : Container.js

const mapDispatchToProps = (dispatch) => { 
    return { 
     handleYeastChange: (yeastType, temp) => { 
      const yeast = {yeastType, temp} 
      dispatch(actions.updateYeast(yeast)) 
     } 
    } 
}; 

Component.js 이런 일이 왜 알아낼 수 없습니다

updateYeastState = (updatedYeast) => { 
    this.props.handleYeastChange(updatedYeast.yeastType, updatedYeast.temp) 
}; 

합니다. 나는 그 물체를 끝까지 지나쳐 재구성 할 필요가 없다고 생각했다.

Answer 1

action을 올바르게 파견합니까? 그리고 redux을 사용할 때 구성 요소의 상태를 업데이트하지 않고 store을 업데이트하면 store에서 가져 오는 mapStateToProps 함수의 구성 요소 값이됩니다. store을 yourReducer라는 이름의 개체로 업데이트한다고 가정 해 보겠습니다. 예 :

Container.js :

const mapStateToProps = (state) => ({ 
    inputValue: state.yourReducer.value 
}) 
const mapDispatchToProps = (dispatch) => ({ 
    inputHandler: (e) => { 
    dispatch(yourAction({type: 'CHANGE_INPUT', value: e.target.value})) 
    // The store catches the action and pass to the reducer that can read the action's type 
    // in `yourReducer` will catch the 'CHANGE_INPUT' type and 
    // return a new value as same as the value that passed from the action 
    } 
}) 
export default connect(mapStateToProps)(Component) 

Component.js이 redux-devtool을 시도 할 수 redux 디버깅

export default class Component extends React.Component { 
    { your custom function here ... } 

    render() { 
    const { inputValue, inputHandler } = this.props 
    return (
     <div> 
     {/* The input will be the same as the inputValue changed */} 
     <input value={inputValue} onChange={inputHandler} /> 
     </div> 
    ) 
    } 
} 

.