Question

我刚刚开始学习带有react的redux，并且已经有一段时间了，这个简单的问题现在我不知道了。我有一个按钮，该按钮调度一个操作以增加一个值，该操作通过并更新状态，但是组件中从未反映出任何更改。我在这里做什么错了？

const ACTION = 'ACTION';
const defaultState = {
  value: 5
};
const doAction = ()=>{
  return {
    type: ACTION
  };
};

const reducer = (state = defaultState, action) => {
  let update = Object.assign({}, state);
  switch(action.type){
    case ACTION:
      update.value = state.value + 1;
      return update;
    default:
      return state;
  }
};

const store = Redux.createStore(reducer);

class App extends React.Component {
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e){
    this.props.doAction();
  }

  render(){
    return(
      <div id='app'>
        <button onClick={this.handleClick}>Click</button>
        <p>{this.props.value}</p>
      </div>
    );
  }
}

const Provider = ReactRedux.Provider;

const mapStateToProps = (state)=> {
  return {
    value: state.value
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    doAction: () => {
      dispatch(doAction())
    }
  };
}

const Container = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(App);

class AppWrapper extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return(
      <Provider store={store}>
        <Container />
      </Provider>
    );
  }

}

ReactDOM.render(<AppWrapper />, document.getElementById('root'));

Answer 1

有关codepen.io的问题

默认情况下，Codepen提供最新版本的react-redux，很不幸，它是测试版本（5.1.0-test.1）。将react-redux的外部脚本URL更改为https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.js，并且您的笔应该可以使用：Working example

我不建议使用Codepen进行反应开发。如果必须将create-react-app或codesandbox.io用作在线参考，请考虑使用。您确实需要一个以上的可编辑文件来构造您的动作，减速器和组件。

如何改善代码

在化简器中，即使在返回前一状态的情况下，也始终会创建前一状态的副本。尝试以下方法：

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ACTION:
      return { ...state, value: state.value + 1 };
      // Alternative: Object.assign({}, state, { value: state.value + 1 });
    default:
      return state;
  }
};

这将确保仅在需要时创建对象。您可能已经为这种简单的状态形状返回了{ value: state.value + 1 }，当您想要克隆先前的状态并仅更改某些（或删除）属性而不影响其他属性时，散布运算符或Object.assign(...)是非常有用的工具。 / p>

此外，您可以将应用重构为功能性的React组件：

const App = (props) => (
  <div>
    <button onClick={props.action}>Click</button>
    <p>{props.value}</p>
  </div>
);

并使用以下命令将应用程序连接到redux：

const mapStateToProps = (state) => ({
  value: state.value
});

const mapDispatchToProps = dispatch => ({
  action: () => dispatch(doAction())
});

const Container = connect(mapStateToProps, mapDispatchToProps)(App);

请注意，我在这里坚持使用您的组件名称。

从这里去哪里...

如果您对更大的示例感兴趣，我创建了this sandbox，它具有路由，伪造身份验证，待办事项列表和简单计数器。 Redux devtools也已集成。只需打开this site上的浏览器扩展程序，即可检查商店和调度的动作。

简单的React-Redux组件未更新

1 个答案:

有关codepen.io的问题

如何改善代码

从这里去哪里...