How to change the redux state by input?

JavaScript
1

Hey coder!

I want to know if there is a basic tutorial for “changing redux state by an input field”.

I wasn`t able to find one!

Best regards!!!

2

The basic idea is to have a listener on the input (onChange, usually) and have that fire a redux action. You have the action tell the reducer to make the change to the store.

If you get that basic concept I would assume any tutorial would make that pretty much the first thing they teach. Or they usually use a count incrementer example, which is the same concept on a different element.

1 Like
3

following what @JacksonBates said, and assuming that you are wanting to change the store’s state with a React component, here below is a basic bare-bones example.

https://codepen.io/Dee73/pen/xeoYay?editors=1010

Notice that the input field is a controlled component and it’s value is actually controlled by the Redux store and not the React state (the React component has no state) but rather data coming from the store as props into to the React component, the action creator is also triggered via props all made possible by the React-Redux lib. which basically connects React components to a Redux store, with 2 mechanisms:

  • A Provider Component that is used to wrap the React app
  • 2 Pure functions mapStateToProps and mapDispatchToProps that are passed to the connect method, to, well as the names signify, map the stores state to the component’s props and map the store.dispatch to the components props as well.

While this example is a bare-bones example it has all the ingredients needed to connect a React component to a Redux store, the only thing missing would be for handling asynchronous actions, for that particular task you would also need Redux-thunk.

If you can read up more on the above things you should be good to go, also give the FCC Redux lessons a try and practice building small apps.

2 Likes
4

Dear coder,

thank you very much for your reply.

I am at the stage of building a “test-playground” on how far I am able to code with React-Redux.
That means, an easy Increment-button, a chartbar which increases with growing count, some other features, and so on.

I will check the codepen example this evening and try to implement the logic to my playground. My intention is to have an input-field and a submit button. On submit, the selected state in the Redux-store should be change (for example: inputing 10 and submit should set the counter to 10). :))))

I will report later if I`m able to do so :))

Best regards!

5

@tb47 , there should be no reason that you couldn’t accomplish that. The events are irrelevant to Redux and can be handled by React’s synthetic event handlers; click, mouse touch, input change…, don’t really matter, think of them separately to what Redux does, it is just a tool to store data that different container components can have access to at any time, thanks to the React Redux bindings, technically you can accomplish this without the React Redux bindings by using the native Redux methods, subscribe, dispatch… , et al. , but this is not recommended.