Question

我是React和Redux的新手。我一直在尝试创建一个计数器来学习如何使用Redux，但是我无法更新视图或调用mapStateToProps。我浏览了Redux故障排除页面，并查看了此处发布的许多类似线程。有人可以帮我确定这段代码有什么问题吗？

import React from 'react'
import { render } from 'react-dom'
import { Provider, connect } from 'react-redux'
import { createStore } from 'redux'

import './index.scss';

let Counter = props => {
    console.log('>>> counter', props)
    return (
        <div>
            <h1>counter (Redux Version)</h1>
            <p>count: {props.count}</p>
        </div>
    );
}

let increment = () => {
    return {
        type: 'INC'
    }
}

const counterReducer = (state = {count: 0}, action) => {
    switch (action.type) {
        case 'INC':
            console.log('>>> inc');
            return { count: state.count + 1 };
        default:
            return state;
    }
}

const mapStateToProps = state => {
    console.log('>>> map state to props', state);
    return { count: state.counterReducer.count };
};

const store = createStore(counterReducer);
connect(mapStateToProps, null)(Counter);

render(
    <Provider store={store}>
        <Counter count={0}/>
    </Provider>,
    document.getElementById('root')
);

window.store = store;
window.increment = increment;

使用Chrome控制台，我可以看到商店的状态，然后调度增量事件。当我这样做时，我看到存储中的状态已正确更新，但是在段落标记中显示的值仍然显示为0。

store.getState()
  {count: 0}

store.dispatch(increment());
  VM1382:1 >>> inc
  {type: "INC"}

store.getState()
  {count: 1}

Answer 1

Counter不会在派发时更新，因为Counter中的render实际上不是连接的组件。

根据connect（https://react-redux.js.org/api/connect）上的文档：

它不会修改传递给它的组件类；而是返回一个新的，已连接的组件类，该类包装了您传入的组件。

这意味着简单地调用connect(mapStateToProps, null)(Counter);不会使Counter发生突变，但是它将返回它的连接版本。返回的组件就是您想要的。

对此的快速解决方案是保存connect的返回值：

const ConnectedCounter = connect(mapStateToProps)(Counter);

并在渲染中使用ConnectedCounter而不是Counter：

<Provider store={store}>
  <ConnectedCounter count={0}/>
</Provider>

将组件连接到商店时，建议在其自己的jsx文件中实现组件，并将连接的组件默认导出。

在Counter.jsx中，我们可以拥有...

import { connect } from 'react-redux';

const Counter = props => {
  console.log('>>> counter', props)
  return (
      <div>
          <h1>counter (Redux Version)</h1>
          <p>count: {props.count}</p>
      </div>
  );
}

const mapStateToProps = state => {
  console.log('>>> map state to props', state);
  return { count: state.counterReducer.count };
};

export default connect(mapStateToProps)(Counter);

...因此，只要将Counter导入到项目的其他位置（import Counter from '<path>/Counter'），我们就可以确定Counter已经是一个已连接的组件。

当redux存储更改时，为什么我的React视图没有更新？

1 个答案: