Redux Login form

September, 2019
Photo by Flickr

Redux keeps the state of our application in a single store. Our React components get connected to that Redux store and every time when the data is changed the components are re-rendered. The connecting happens by providing two functions. The first one is mapping state fields to component props. The second one maps again to component props but the input is a dispatch function.

The only one way to change the data in the Redux store is to dispatch an action. The only requirement for that action is to contain a type field. All the dispatched actions are passed to functions which we call reducers. Every reducer receives the current state and the dispatched action and MUST return a new state. Based on the type we have to decide what needs to be changed.

Not all the reducers react on all the actions. In such cases we just return the incoming state object. In our example we want to update the value property but if the type is not INCREMENT we return the same object saying that the state is not changed. At the end we have to use a Provider that accepts our store and makes it available for any nested component that is wrapped into connect call.

“Talk is cheap. Show me the code.”

Full screen

More by
the same passionate developer