Question

我是Redux的新手，并且一直在使用the very first example project in the Redux docs的代码。该示例未使用容器或没有单独的文件进行操作，因此我认为我将从此处开始并尝试对其进行抽象。

该项目没有App组件，并且 index.js 文件如下所示：

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import Counter from './components/Counter'
import counter from './reducers'

const store = createStore(counter)
const rootEl = document.getElementById('root')

const render = () => ReactDOM.render(
  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
)

render()
store.subscribe(render)

我首先对其进行了更改，以使其改为安装了App组件：

...

import { Provider } from 'react-redux':

...

const render = () => ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById('root')
);

我已将Counter组件移至 App.js ，并尝试使用mapStateToProps引入初始状态（设置为state = 0在减速器中）：

import React from 'react';
import Counter from '../components/Counter.js';
import { connect } from 'react-redux';

class App extends React.Component {

    render() {
        return(
            <div>
                <Counter value={value} />
            </div>
        );
    }
}

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

export default connect(mapStateToProps)(App);

我正在尝试通过Counter中设置的value和mapStateToProps道具。

使用上面的代码，我在<Counter value={value} />处收到错误：

“值”未定义为un-undef

听起来很疯狂，我想也许我必须在value的{{1}}函数内初始化constructor才能完成这项工作：

App

这没用，而且考虑到在reducer中初始化了状态，这还是没有意义的。

Answer 1

您做对了很简单，但是您只需在render方法中进行一些更改即可获得更新的值，您的问题将得到解决。

只需在您要使用的App组件中进行这些更改即可。

import React, {Component} from 'react';
import Counter from '../components/Counter.js';
import { connect } from 'react-redux';

class App extends Component {

  render() {
    const {
      props: {
        value
      }
    } = this;
    return(
        <div>
            <Counter value={value} />
        </div>
    );
  }
}

您无需使用initialize方法中的constructor值。

Answer 2

从mapStateToProps返回的值成为道具的一部分。因此，“价值”将成为道具的一部分。您可以通过以下方式访问“值”：

@ComponentScan({"pkg1","pkg2"})

无法将Redux状态传递给子组件

2 个答案: