• Home
  • Categories
  • Video Tutorials
    • Angular 5
  • News
  • About us
  • Contact us
  • Login
test
Code4Developers

Code4Developers

Code4Developers
  • Home
  • Categories
  • Video Tutorials
    • Angular 5
  • News
  • About us
  • Contact us
  • Login
  • React

Redux

  • Arif Khoja
  • January 16, 2018
  • 2 minute read
Redux
Total
0
Shares
0
0
0

Okay. So redux is a very simple solution to manage state. It has a few different parts, but none of them are difficult to understand, and it is very easy to work with. I don’t think I ever see any bugs in that part of my code bases.

Let’s begin with the reducer. A redux setup consists of one or more reducer. A reducer is a function, plus the initial state. The reducer function is usually a large or small switch / case. You are free to write it exactly how you like, but it has to return a new version of your state, and it receives an object as input.

The typical way to do it is to use a TYPE key in the object to tell what kind of change it is, and then some additional data, if needed.

Important: input to a reducer is a pure object, and the output is a pure object.

Then you have your actions, this is the stuff inside the switch / case.

Then you have action-creators. These are functions that you use, and the result is that an action is invoked on the reducer. For example: load data from back-end, and then add that data to the store.

This is the important part. You create a redux store, with one o

r more reducer. This is an instance of your store. Then you can use the dispatch method on that store object to send actions to it, or to get the current state.

You can either use it directly, but that would be a little bit “cumbersome” using React. What most people are doing is to create the store, and then add it to the Provider component in React-Redux. And then use connect.

The way this works is that Provider add your store as a context, and then the connect function, component or what ever use it, and you first run it through a function where you chose what properties from the state you need, and then you run the function that returns with your component as an argument. It can also map any methods to dispatch.

Or, if you don’t want to do that, the dispatch method will be available as a prop on all component you run through connect.

A few implementation tips at the end. Don’t connect props you don’t need, and only connect them where they are needed. There is no need for passing stuff down through long component structures with Redux. And make multiple smaller reducer rather than a few large ones. One patter I’m a huge fan of is to use a higher order function to make a re-usable reducer for everything related to lists, with the redux part being re-usable and the matching and talking with back-end functions as params.

Remember, you can actually test your reducer without hooking it up to redux, since it’s just a plain JavaScript function.

Here is the Example for redux.

Arif Khoja
Arif Khoja

Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.

Views: 4,368

Share this:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on WhatsApp (Opens in new window) WhatsApp
  • Click to share on LinkedIn (Opens in new window) LinkedIn
  • Click to share on X (Opens in new window) X
  • Click to share on Pinterest (Opens in new window) Pinterest
  • Click to email a link to a friend (Opens in new window) Email
  • Click to print (Opens in new window) Print

Like this:

Like Loading...

Related Posts

Total
0
Shares
Share 0
Tweet 0
Pin it 0
1 comment
  1. Pingback: Redux Example - Code 4 Developers

Leave a ReplyCancel reply

Subscribe to Website via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Recent Posts
  • React Hooks Guide: Top Tips for Optimizing Performance in Your React Applications

    React Hooks Guide: Top Tips for Optimizing Performance in Your React Applications

    1 year ago
  • Demystifying JavaScript Tree Shaking: Boosting Performance and Reducing Bundle Size

    Demystifying JavaScript Tree Shaking: Boosting Performance and Reducing Bundle Size

    2 years ago
  • Unlocking the Power of React Hooks: A Comprehensive Guide with Examples

    Unlocking the Power of React Hooks: A Comprehensive Guide with Examples

    2 years ago
  • Celebrating a Decade of Phenomenal Growth: Insights and Reflections on 10 Years of Software Engineering

    Celebrating a Decade of Phenomenal Growth: Insights and Reflections on 10 Years of Software Engineering

    2 years ago
  • Angular Custom Elements: Creating Reusable Components with Angular

    Angular Custom Elements: Creating Reusable Components with Angular

    2 years ago
  • Connect Firebase Realtime NoSQL Database with Angular App from Scratch

    Connect Firebase Realtime NoSQL Database with Angular App from Scratch

    5 years ago
  • How to Build an Inclusive Esports Community

    How to Build an Inclusive Esports Community

    5 years ago
  • Best Digital Icebreakers

    Best Digital Icebreakers

    5 years ago
  • Email alerts when a docker container stopped in AWS ECS CLUSTER

    Email alerts when a docker container stopped in AWS ECS CLUSTER

    5 years ago
  • New Learning Models for Fall 2020

    New Learning Models for Fall 2020

    5 years ago
Subscribe to Website via Email

Enter your email address to subscribe to this website and receive notifications of new posts by email.

Featured Posts
  • javascript 1
    Spread syntax (three dots) in JavaScript
    • March 21, 2018
  • Angular 2
    Angular 6 CRUD – Part 1: Project Setup, Routing, Service
    • May 9, 2018
  • javascript 3
    Local Storage and Session Storage
    • May 22, 2017
  • Angular 4
    Angular 4 Project Structure
    • June 18, 2017
  • AWS 5
    Email alerts when a docker container stopped in AWS ECS CLUSTER
    • July 24, 2020
Code4Developers
Learning is never ending process

Input your search keywords and press Enter.

%d