Redux/React在第一次调度时没有返回更新的状态

Question

我正在学习redux/react，并且正在开发一个示例应用程序来理解它，对于实验我尝试使用reducer更新复选框checked属性。

我的减速机如下。

const check_box_state = (state = false, action) => { 
switch(action.type) { 
    case ActionNames.TOGGLE_CHECKBOX: 
     return !state; 
    default: 
     return state; 
} 
}; 

然后我正在使用react-redux connect方法将下面的代码传递给我的组件。

const StateFullSignInPanel = connect(
function mapStateToProps(state) { 
    return {redux_state: state}; 
}, 
function mapDispatchToProps(dispatch) { 
    return { 
     toggle_check_box: (previous_state) => dispatch(toggleCheckbox(previous_state)) 
    } 
} 
)(SignInPanel); 

export default StateFullSignInPanel; 

最后我的组件如下。复选框的

class SignInPanel extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      checkbox_state: this.props.redux_state.generic_reducers.check_box_state 
     }; 
     this.handleRememberMeState = this.handleRememberMeState.bind(this); 
     this.handleSignInClick = this.handleSignInClick.bind(this); 
    } 

    handleRememberMeState() { 
     let previous_checkbox_state = this.state.checkbox_state; 
     this.props.toggle_check_box(previous_checkbox_state); 
     let new_checkbox_state = this.props.redux_state.generic_reducers.check_box_state; 
     this.setState({ 
      checkbox_state: new_checkbox_state 
     }); 
    } 

    handleSignInClick() { 
    } 

    render() { 
     return <div className="ui card sign_in_card"> 
      <div className="ui input input_fields"> 
       <input type="text" placeholder="Email or username"/> 
      </div> 
      <div className="ui input input_fields"> 
       <input type="text" placeholder="Password"/> 
      </div> 
      <div className="ui checkbox remember_me_checkbox"> 
       <input 
        type="checkbox" 
        id="remember_me" 
        onChange={this.handleRememberMeState} 
        checked={this.state.checkbox_state} 
       /> 
       <label htmlFor="remember_me">Remember me</label> 
      </div> 
      <div className="sign_in_button"> 
       <button className="ui green button" onClick={this.handleSignInClick}> 
        Sign in 
       </button> 
      </div> 
     </div> 
    } 
} 

export default SignInPanel; 

国家开始成功地更新，只有第二次后如预期我点击它，首次setState来自还原得到默认的状态和复选框取消选中保持。我还使用了redux-logger中的loggerMiddleware，它显示在动作分派后状态已成功从false更新为true，但即使在收到新状态后也是false。我究竟做错了什么？

Answer 1

尝试这一方法（摆脱了关闭的内部状态和现在的复选框被控制使用上Redux的状态exising键）：

import { toggleCheckbox } from './actions'; 

class SignInPanel extends Component { 

    constructor(props) { 
     super(props); 
     this.handleRememberMeState = this.handleRememberMeState.bind(this); 
     this.handleSignInClick = this.handleSignInClick.bind(this); 
    } 

    handleRememberMeState() { 
     this.props.toggle_check_box(this.props.check_box_state); 
    } 

    handleSignInClick() { 
     // ... 
    } 

    render() { 
     return <div className="ui card sign_in_card"> 
      <div className="ui input input_fields"> 
       <input type="text" placeholder="Email or username"/> 
      </div> 
      <div className="ui input input_fields"> 
       <input type="text" placeholder="Password"/> 
      </div> 
      <div className="ui checkbox remember_me_checkbox"> 
       <input 
        type="checkbox" 
        id="remember_me" 
        onChange={this.handleRememberMeState} 
        checked={this.props.check_box_state} 
       /> 
       <label htmlFor="remember_me">Remember me</label> 
      </div> 
      <div className="sign_in_button"> 
       <button className="ui green button" onClick={this.handleSignInClick}> 
        Sign in 
       </button> 
      </div> 
     </div> 
    } 
} 

export default connect(
    (state) => ({ check_box_state: redux_state.generic_reducers.check_box_state }), 
    { toggle_check_box: toggleCheckbox } 
)(SignInPanel); 

作为每^^此实现现在了Redux状态是直接connect编到SignInPanel。所以我们不需要mapStateToProps和mapDispatchToProps的代码来创建StateFullSignInPanel。