Basics of redux

reactlogo2
reactlogo2

Redux was created by Dan Abramov around June 2015.Redux in suitable for use in complex applications using react.Today we are going to cover the basics of redux and the components which make up redux.

reduxflowchart
reduxflowchart

Store:

Redux consists of a single store which is simply a javascript object storing multiple properties(states).We can pass middleware to store to handle processing of data as well as to keep a log of various actions that change the state of stores.It is the object that holds the complete application state and provides a few helper methods to access the state of various properties, dispatch actions and register listeners.

Provider:

The  provider component is initialized as the root of all other react components in your application.It triggers a rerender of the components each time the state of store changes.

Actions:

Actions are objects that describe how we want to mutate our state.Actions bring about the change in properties of store through reducers. For example we can execute ajax requests in actions and then update the properties of store based on response of ajax request.

Reducers:

Reducers are the link between actions and store which bring about a change in store properties.reducers are pure functions that take the current state of the application and an action and then return a new state which updates the store object.A redux app can have multiple reducers each for a specific task.A reducer takes two argument viz initial state properties in which we can initialize the props with defaults values for a store and second is action from which reducer takes data based on its type and updates the store.

The smart components are top-level components which are aware of changes in store properties and which dispatch actions based on certain events.

The dumb components are the ones which get data as props from smart component and renders them without control over any actions.

So the basic flow of data in redux is first you initialize properties with default values in the store by using reducer.Next you alter these properties using actions triggered by various events in react components.

Now that you understand the basics of redux components head over next tutorial to build simple react-redux app: Simple react redux app

Share post-
About Saurabh Mhatre 71 Articles
Currently working in web and hybrid application development