To create the store we use the createStore() factory function exported by Redux. It accepts three arguments: a mandatory reducer function, an optional initial state, and an optional store enhancer.

We will cover store enhancers later in this chapter and start by creating a basic store with a dummy reducer that ignores actions and simply returns the state as it is:

import { createStore } from 'redux';

const initialState = {

 recipes: [],

 ingredients: []
}

const reducer = (state, action) => state;

const store = createStore(reducer, initialState);

The simple store that we have just created has five methods that allow us to access, change, and observe the state. Let’s examine each of them.

Accessing the State

The getState() method returns the reference to the current state:

Get current state from store

 store.getState();

 // => { recipes: [], ingredients: [] }

Changing the State

Sending action objects to reducers is done via the store using the store’s dispatch() method, which accepts a single argument, the action object:

Dispatch action to store

const action = { type: 'ADD_RECIPE', … }

store.dispatch(action);

Listening to Updates

the subscribe() method It accepts a callback function, which will be executed after every action has been dispatched:

The subscribe method

 const store = createStore((state) => state);

const onStoreChange = () => console.log(store.getState());

store.subscribe(onStoreChange);

Replacing the Reducer

Let’s look at a simple example with some functionality available only for authenticated users.At initial load, our store will only handle the currentUser substate—just enough for the authentication:

Basic reducer setup

 import { combineReducers } from 'redux';

 import { currentUser } from 'reducers/current-user';

 const reducer = (state, action) => combineReducers({ currentUser });

 const store = createStore(reducer);

Store as Observable

To support older browsers, Redux uses the symbol-observable²⁸ polyfill when Symbol.observable is not natively supported.

Integration with RxJS

 import store from "store";

 import { Observable } from "rxjs";

 const store$ = Observable.from(store);

store$.forEach((state) => console.log(state))

Redux store observable

const observable = store[Symbol.observable]();

If you like this post, don’t forget to share 🙂

This article is written by our awesome writer
Comments to: Easy Way to Creating a Store In Redux

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

New Dark Mode Is Here

Sign In to access the new Dark Mode reading option.

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Articles

Explore Tutorials By Categories

About

Codeverb is simply an all in one interactive learning portal, we regularly add new topics and keep improving the existing ones, if you have any suggestions, questions, bugs issue or any other queries you can simply reach us via the contact page

Login

Welcome to Codeverb

Ready to learn something new?
Join Codeverb!

Read Smart, Save Time
  •  
    Strength indicator
  •  
  •  
    Log In | Lost Password