CODEWITHSUNDEEP
reduxreact-redux
retqs
retqs

Reputation: 65

I was trying to get input with redux,all is fine but I can't figure out how to get input values

Trying to get user input with action,all is working i get my console.logs about how inputVal changes,but when I try to print this in

i get undefined in console

Should I use like mapDispatchToProps or I don't need this,since I'm passing actions as second param into mapStateToProps

actions:

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

reducer:

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;
  }
};

mainPage:

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);

combinedReducers:

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

export default combineReducers({
  AddItem,
  InputReducer
});

I've tried to this.props.inputVal.

Upvotes: 2

Views: 32

Answers (1)

SuleymanSah
SuleymanSah

Reputation: 17888

Since you have combineReducers, you should use these keys to access in mapStateToProps.

From the redux docs:

The state produced by combineReducers() namespaces the states of each reducer under their keys as passed to combineReducers()

You can control state key names by using different keys for the reducers in the passed object. For example, you may call combineReducers({ todos: myTodosReducer, counter: myCounterReducer }) for the state shape to be { todos, counter }.

So your mapStateToProps must be like:

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

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

A minimal working code sandbox:

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

Upvotes: 1

Related Questions