Redux Keep показывает неопределенное состояние

Question

Я новичок в React и Redux. Хотя я нахожу много источников в Интернете, но он все еще не работает. Надеюсь, кто-нибудь может мне помочь.

Я хочу использовать щелчок для запуска компонента Q1: я отслеживаю начальное состояние и нахожу, что оно работает нормально, но в компоненте отображается неопределенное Q2: как я могу продолжать подписывать государство? (например, распечатать его с 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

---

когда я использую log in index.js, я увидел начальное состояние "open" но кнопка в компоненте показывает undefine Пожалуйста, помогите мне, большое спасибо

Answer 1

Ваша функция mapStateToProps в контейнере должна использовать state.sidebar.open вместо state.open. Когда вы звоните combineReducers({ sidebar }), вы создаете структуру состояния, такую ​​как { sidebar: { open: false } }. См. Документацию по Объединить редукторы здесь .