Question

我是React和Redux的新手。尽管我在Internet上找到了很多资源，但仍然无法正常工作。希望有人能帮助我。

我想使用click触发组件 Q1：我跟踪初始状态，发现它工作正常，但在组件中显示未定义问题2：如何继续订阅状态？（例如使用console.log打印出来）

代码：index.js

import .....

const store = createStore(rootReducer)
console.log(store.getState())
render(
  <Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)

App.js

import ToggleSidebar from '../containers/ToogleSidebar'
const App = () => (
<div>
     <ToggleSidebar/>
</div>
)
export default App

Reduce.js

const sidebar = (state={open:false}, action) => {
    switch (action.type) {
      case 'TOGGLE_SIDEBAR':
      return {
          ...state,
          open : !state.open
      }
      default:
      return state
    }
  }

  export default sidebar

组合

import { combineReducers } from 'redux'

import sidebar from './sidebar'
export default combineReducers({
  sidebar
})

Acion

export const toggleSideBar = () => ({
  type: 'TOGGLE_SIDEBAR',

})

容器

import { connect } from 'react-redux'
import { toggleSideBar } from '../actions'
import Sidebar from '../components/Sidebar'

const mapStateToProps = (state) => ({
   open: '...'+state.open+'...'
})

const mapDispatchToProps = (dispatch) => ({
    toggleSideBar: () => dispatch(toggleSideBar())
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Sidebar)

组件

const  Sidebar = ({open,toggleSideBar}) =>  (

        <div>
          <button onClick={toggleSideBar}>
            {open} 
          </button>
        </div>
)
  export default Sidebar

当我在index.js中使用log时，我看到“ open”的初始状态但是组件中的按钮显示未定义请帮助我，非常感谢

Answer 1

您在Container中的mapStateToProps函数应使用state.sidebar.open而不是state.open。调用combineReducers({ sidebar })时，您正在创建类似{ sidebar: { open: false } }的状态结构。请参阅combineReducers here上的文档。

Redux继续显示未定义状态

1 个答案: