Я пытался получить ввод с помощью приставки, все в порядке, но я не могу понять, как получить входные значения

Question

Пытаясь получить пользовательский ввод с действием, все работает, я получаю мои console.logs о том, как inputVal изменяется, но когда я пытаюсь напечатать это в

, я получаю неопределенное в консоли

Должен ли я использовать как mapDispatchToProps или мне это не нужно, поскольку я передаю действия в качестве второго параметра в mapStateToProps

export const inputChange = val => {
  return {
    type: INPUT_CHANGE,
    payload: val
  };
};

import { INPUT_CHANGE } from './actionTypes';

const initialState = {
  inputVal: ''
};

export default (state = initialState, action) => {
  switch (action.type) {
    case INPUT_CHANGE:
      return {
        ...state,
        inputVal: action.payload
      };
    default:
      return state;
  }
};

const mapStateToProps = state => {
  console.log(state);

  return state;
};

class MainPage extends Component {

  onInput = e => {
    this.props.inputChange(e.target.value);
    console.log(this.props.inputChange(e.target.value));
  };

  render() {
    console.log(this.props.inputVal);
    return (
      <div>
         <input onChange={this.onInput}></input>
        <p>{this.props.}</p>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  {
    addToCart,
    removeFromCart,
    selectItem,
    inputChange
  }
)(MainPage);

import { combineReducers } from 'redux';
import AddItem from './addItem/reducer';
import InputReducer from './reducerInput';

export default combineReducers({
  AddItem,
  InputReducer
});

Я пытался это сделать. Props.inputVal

Answer 1

Поскольку у вас есть combReducers, вы должны использовать эти ключи для доступа в mapStateToProps.

Из документов документооборота:

Состояние, создаваемое пространствами имен combReducers (), состояний состояний каждогоРедуктор под их ключами, как передано на функцию зернового перевода ()

Вы можете управлять именами ключей состояния, используя разные ключи для редукторов в переданном объекте. Например, вы можете вызвать синонимы ({todos: myTodosReducer, counter: myCounterReducer}) для формы состояния, равной {todos, counter}.

Таким образом, ваш mapStateToProps должен иметь вид:

const mapStateToProps = state => {
  console.log(state);

  return {
     inputVal: state.InputReducer.inputVal
  }
};

Минимальная рабочая песочница с кодом:

https://codesandbox.io/s/cold-meadow-pxtu3