React Router / Redux - 连接的组件未将 Redux 状态传递给道具

Question

我正在将一个组件连接到 redux 存储，但只传递了 react-router 道具。甚至在 mapStateToProps 函数中设置 testVar 都不起作用。

代码简化：

//index.js
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk' 
import {initialState} from './reducers/RootReducer';

const store = createStore(RootReducer,initialState, applyMiddleware(thunk));

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

// App.js
import Home from './path/to/Home-component'
import About from './path/to/About-component'
...
<div>
<Switch>
      <Route exact path='/' component={Home}/>
      <Route path='/uploadsideletters' component={About}/>
      ...
    </Switch>
</div>
...

// About.js
...
  export default connect(mapStateToProps,mapDispatchToProps)(About);

  const mapStateToProps = (state) => ({
    ...state,
      testVar: "test"
  });

  const mapDispatchToProps = (dispatch) => ({
    // empty for now
  });

在渲染方法中将this.props 打印到控制台时，我得到： Object {history: Object, location: Object, params: Object, route: Object, routeParams: Object…} 我的 testVar 不存在。这是为什么呢？

Answer 1

虽然看起来很简单，但问题是我在mapStateToProps()和mapDispatchToProps()之前调用了connect(...)。

更改连接部分，现在看起来像：

// About.js
...

  const mapStateToProps = (state) => ({
    ...state,
      testVar: "test"
  });

  const mapDispatchToProps = (dispatch) => ({
    // empty for now
  });

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