Redux开发疑问：受控输入应存Store还是用组件本地状态？

嘿，作为刚接触Redux的新手，纠结受控输入的状态存放位置太正常啦！我来帮你拆解清楚这个问题～

核心判断标准：这个输入值是否需要「全局共享/联动/持久化」 #

Redux的核心作用是管理跨组件共享、需要全局维护的状态，而组件本地状态（this.state）适合存放仅当前组件使用的临时状态。所以分两种情况来看：

情况1：用组件本地状态（你的示例代码完全合理） #

如果这个输入值只是当前Calc组件自己使用——比如只是临时输入、不需要同步给其他组件、也不需要和Redux里的其他状态联动，那完全没必要放到Redux Store里。

就像你写的代码那样，用组件本地状态维护inputVal，逻辑简单直接，还能避免Redux store变得臃肿：

class Calc extends React.Component {
  constructor(props){ 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
    this.state = { inputVal: '' } 
  } 
  handleChange(e){ 
    this.setState({ [e.target.name]: e.target.value }) 
  } 
  render(){ 
    return( 
      <div> 
        <input type="text" name="inputVal" value={this.state.inputVal} onChange={this.handleChange} /> 
      </div> 
    ) 
  }
}

情况2：用Redux Store #

如果满足以下任意一种场景，就应该把输入值放到Redux的initialState里，通过分发Action来更新：

• 这个输入值需要被其他组件共享（比如另一个组件要显示当前输入的内容）；
• 输入值需要和Redux中的其他状态联动（比如输入变化后要触发异步请求、或者修改其他全局状态）；
• 需要持久化保存输入值（比如刷新页面后还要保留当前输入）。

举个Redux版本的示例：

首先定义Action和Reducer：

// action type
const UPDATE_INPUT_VAL = 'UPDATE_INPUT_VAL';

// action creator
export const updateInputVal = (value) => ({
  type: UPDATE_INPUT_VAL,
  payload: value
});

// reducer
const initialState = {
  inputVal: ''
};

export const calcReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_INPUT_VAL:
      return {
        ...state,
        inputVal: action.payload
      };
    default:
      return state;
  }
};

然后改造组件，连接Redux：

import { connect } from 'react-redux';
import { updateInputVal } from './path-to-your-actions';

class Calc extends React.Component {
  handleChange(e) {
    // 通过props分发Action更新Redux状态
    this.props.updateInputVal(e.target.value);
  }

  render() {
    // 从Redux状态中获取input值
    return(
      <div>
        <input 
          type="text" 
          name="inputVal" 
          value={this.props.inputVal} 
          onChange={this.handleChange.bind(this)} 
        />
      </div>
    )
  }
}

// 映射Redux状态到组件props
const mapStateToProps = (state) => ({
  inputVal: state.calc.inputVal // 假设你的reducer在store的calc命名空间下
});

// 映射Action到组件props
const mapDispatchToProps = {
  updateInputVal
};

export default connect(mapStateToProps, mapDispatchToProps)(Calc);

总结 #

别把所有状态都丢去Redux！遵循「本地状态管临时，Redux管全局」的原则，既能让代码逻辑更清晰，也能减少不必要的状态更新开销。

内容的提问来源于stack exchange，提问作者iLiA