状态在mapStateToProps有错误的数据

我很确定我有一些小的配置错误，因为我没有有这个工作。但是当我通过反应减少connect调用打我的mapStateToProps时，它正在注入我的减速器。我的设置是：状态在mapStateToProps有错误的数据

App.js：

import React from 'react'; 
import BuildsContainer from '../containers/builds-container'; 
import NavBarContainer from '../containers/nav-bar-container'; 

class App extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div> 
       <NavBarContainer /> 

       <div className="container body-content"> 

        <BuildsContainer /> 

        <hr /> 
        <footer> 
         <p>&copy; 2016</p> 
        </footer> 

       </div> 
      </div> 
     ); 
    } 
} 

export default App;

导航栏-container.js：

import { connect } from 'react-redux' 
import NavBar from '../components/nav-bar' 
import { setUsername } from '../actions/actions' 

const mapStateToProps = (state) => { 
    console.log(state) 
    return {username: state.username} 
} 

const mapDispatchToProps = ({ 
    setUsername: setUsername 
}) 

const NavBarContainer = connect(
mapStateToProps, 
mapDispatchToProps 
)(NavBar) 

export default NavBarContainer

我的主减速器，reducer.js：

import { combineReducers } from 'redux' 
import UsernameReducer from './username-reducer' 
import BuildsReducer from './builds-reducer' 

const BuildWatcherApp = combineReducers({ 
    UsernameReducer, 
    BuildsReducer 
}) 

export default BuildWatcherApp;

和我的用户名 - reducer.js：

const UsernameReducer = (state = '', action) => { 
    switch (action.type) { 
     case 'SET_USERNAME': 
      return action.username 
     default: 
      return state; 
    } 
} 

export default UsernameReducer;

如果我在mapStateToProps呼叫做console.log(state)，其显示：

似乎state有我在减速它。这看起来不对，我期待它具有username道具。如果值得注意的话，那么mapDispatchToProps好像有正确的func被传递给它。

有人能告诉我我失踪了什么吗？

来源

2016-12-06 Jonesopolis

它是正确的，因为在'combineReducers'中'UsernameReducer'用作关键'{UsernameReducer：UsernameReducer}'。 –

@AlexanderT。在这里做出什么适当的改变？我对'state'对象期待'username'是否正确，我把它连接错了？或者这是正确的连接，我误解了它应该如何工作 – Jonesopolis

@Jonesopolis为了了解为什么会发生，你需要看看'combineReducers'函数https://github.com/reactjs/redux/blob/ master/src/combineReducers.js＃L102，https://github.com/reactjs/redux/blob/master/src/combineReducers.js#L103。你可以看到'combineReducers'使用过的键，在你的情况下你使用了两个键'UsernameReducer'，'BuildsReducer'，并为这个'键'赋值减速器功能 –

原来我的问题是与combineReducers：

const BuildWatcherApp = combineReducers({ 
    UsernameReducer, 
    BuildsReducer 
})

在我的名字减速不匹配我的状态属性。将其更改为：

const BuildWatcherApp = (state = {}, action) => ({ 
    username: UsernameReducer(state.username, action), 
    builds: BuildsReducer(state.builds, action) 
})

修复它。

来源

2016-12-06 16:31:38 Jonesopolis

或者只是将您导入减速器的名称更改为。因为您将它们导出为默认值，那么您可以选择任何想要的名称：用户名和构建版。 – kjonsson

这是一个更明智的答案 – Jonesopolis

是的，这是一个常见问题，这就是为什么我在Redux文档中写了一个名为[Using'combineReducers']的部分（http://redux.js.org/docs/recipes/reducers/UsingCombineReducers .html）来帮助澄清这是如何工作的。另外，你仍然可以使用'combineReducers'，你只需要提供你想要的键名而不是使用对象简写：'combineReducers（{username：UsernameReducer，builds：BuildsReducer}）;' – markerikson

状态在mapStateToProps有错误的数据

回答

相关问题