Компонент не получает реквизиты из магазина Redux через mapStateToProps

Question

В моем компоненте реакции мне нужно получить состояние из хранилища Redux в качестве реквизита и использовать его.Я использую mapStateToProps, который правильно получает состояние из хранилища приставок, так как начальные значения console.logged правильно.Тем не менее, все реквизиты в моем компоненте не определены, когда я их использую.Я не делаю каких-либо явно асинхронных вызовов, которые, по-видимому, являются проблемой в предыдущих вопросах, которые я нашел, поэтому я не уверен, почему мой компонент не имеет доступа к этим реквизитам.

src / components/SearchBar.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import actionType from '../constants/action-types';

class SearchBar extends Component {

  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={this.props.filterText}
          onChange={this.onTextChange}
        />
        <p>
          <input
            type="checkbox"
            checked={this.props.inStockOnly}
            onChange={this.onInStockCheckedChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }
}


function mapStateToProps(state) {
    console.log("SearchBar state:", state);

    return {
        filterText: state.filterText,
        showInStockOnly: state.showInStockOnly
    };
}

function mapDispatchToProps(dispatch) {
    return {
        onTextChange: (evt) => {
            const action = {
                type: actionType.UPDATE_ON_TEXT_CHANGE,
                value: evt.target.value
            };
            dispatch(action);
        },

        onInStockCheckedChange: () => {
            const action = {
                type: actionType.SET_IN_STOCK_ONLY_CHECKED,
            };
            dispatch(action);
        }
    };
}

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

источник / редукторы / searchBar_reducer.js

import actionType from '../constants/action-types';
import initialState from '../constants/initial-state';


const searchBar = (state = initialState, action) =>{
    console.log('SearchBar reducer running: ', state, action);

    switch (action.type) {

        case actionType.UPDATE_ON_TEXT_CHANGE:
            console.log("Text change action dispatched!")
            return Object.assign({}, state, { filterText: action.value});

        case actionType.SET_IN_STOCK_ONLY_CHECKED:
            console.log("InStockOnly action dispatched!")
            return Object.assign({}, state, { inStockOnly: !state.inStockOnly});

        default:
            return state;
    }
}


export default searchBar;

источник / редукторы / index.js

import { combineReducers } from 'redux';

import searchBar from './searchBar_reducer'


const rootReducer = combineReducers({
    searchBar
});


export default rootReducer;

src / index.js

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
//import App from './components/App';
import SearchBar from './components/SearchBar'
import rootReducer from './reducers/';

const store = createStore(rootReducer);

const unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

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

Answer 1

Это потому, что вы пытаетесь получить доступ к state.filterText, в то время как ваши данные для этого редуктора хранятся в searchBar, поэтому вы должны использовать state.searchBar.filterText