Getting input value in Redux

Question

I am trying to learn Redux and I am curious to know what I am doing wrong here. I have a simple input field, and I want to dispatch an action to make the text uppercase whenever a change occurs in the input field. Here is my Redux store:

const TOCASE = (state="meow", action) => {
   switch(action.type){
      case 'UPPER':
        return state.toUpperCase()
      case 'LOWER':
        return state.toLowerCase()
      default:
        return state
  }
}
const {createStore} = Redux;
const store = createStore(TOCASE)

Here is my component:

const Case = React.createClass({
   render(){
     return(
       <div>
        {this.props.text}
        <input type="text" value={this.props.text} onChange={this.props.onUpper}/>
       </div>
  )
 }
})


const render = () => ReactDOM.render(<Case
              text={store.getState()}
              onUpper={(e)=>store.dispatch(e.target.value,{type: 'UPPER'})}
              />, document.getElementById('app'))

render()
store.subscribe(render)

FurkanO · Accepted Answer · 2016-09-24 17:24:07Z

1

The first problem is in your ReactDOM.render method where you are dispatching an action :

onUpper={(e)=>store.dispatch(e.target.value,{type: 'UPPER'})}

line should be

onUpper={(e)=>store.dispatch({type: 'UPPER', data : e.target.value})}

The second problem is how you are going to implement this change to you reducer too. Your reducer takes two parameters but that doesn't mean you will dispatch state and action. It means in createStore of Redux , Redux passes state to reducer. Best way to learn this to take a look at Redux createStore. It is a very short piece of code. You will thank yourself later.

So the change in your reducer is :

switch(action.type){
      case 'UPPER':
        return action.data.toUpperCase()
      case 'LOWER':
        return action.data.toLowerCase()
      default:
        return state
  }

A short summary how your reducer works or dispatch works. Why do they take the parameters as I told :

Reducer as I said before is being called in createStore function which you give your reducer as the first parameter. So it takes your reducer and returns an Object of dispatch, subscribe and so on. Basically these functions are references to the functions created in createStore.

Everytime you dispatch an action , you actually call the dispatch function createStore returned, basically you are calling your reducer with this dispatch implicitly. I hope this gives you an idea how things work. Best way to check source code.

edited Sep 24, 2016 at 17:24

answered Sep 24, 2016 at 17:15

FurkanO

7,3085 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mahmud Adam Over a year ago

I am a bit confused on this point. If I were to just use getInitialState and setState in my component, wouldn't the input text basically be state. But when adding redux, I am returning, in my reducer, action.data, and not state?

FurkanO Over a year ago

What you are saying is true. Redux is like a giant state manager which works just like react state works. Your example doesn't need redux state but in order to learn how to write code using redux you are doing it with redux. Take your example as a learning step. Don't think much if you really need this in your case. Just focus on how redux works, how your code runs. When you need a giant state, you ll be armed already.

vijayst · Accepted Answer · 2016-09-24 17:14:49Z

1

The dispatch to the store should be the action object.

onUpper={(e) => store.dispatch({ type: 'UPPER', text: e.target.value })}

In the reducer, the code should be:

case 'UPPER':
        return action.text.toUpperCase();

answered Sep 24, 2016 at 17:14

vijayst

22.1k18 gold badges73 silver badges113 bronze badges

Collectives™ on Stack Overflow

Getting input value in Redux

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related