Redux Working - 1. Creating THE SM STORE

How Redux works ?

If you are coming directly to this page, I would suggest you to read what is Redux, to better understand the analogy I am using to explain ‘How Redux Works’.

As we understood, In Redux we have something called STORE, which CONTAINS the STATE info of every CONNECTED component.

If you are unable to understand above line, go through what is Redux.

So the STORE is something which manages the states, let me call it THE State Management (SM) STORE.

Let’s create THE SM STORE first and make it accessible to our app components.

In REACT It’s really simple and izzy-pizzy to create store - use createStore() method provided by react-redux library.

1. install react-redux for your application:

              sudo npm install react-redux -g

2. import react-redux in your component

             import createStore from ‘react-redux’

3. create a store :

             let store = createStore();

Damn easy, isn't it...

We have opened/created our store, but how application components will use it ?

Just like normal store... via entry exit doors.

Redux is so simple that it names entry exit doors as PROVIDER.

In below code snippet <ourApp> has been provided access to the store.
Once app is inside the STORE, it can perform all permitted operations (Create Retrieve Delete)

<Provider store = {

  }>

               <OurApp/>

</Provider>

I will break the Redux working into basic CRUD operation.

Create : Create component's state in THE SM STORE.

Retrieve : Fetch component's state from THE SM STORE.

Update : REDUX 2nd Principle says STATE is read only, so no update allowed

Delete: Remove the component's state info from THE SM STORE.

Previous: What is Redux      Next: Retrieve Component State