Giter Club home page Giter Club logo

redux-react-counter's Introduction

React & Redux: Counter App

Learning exercise

¡Hola mundo!

I've been working with React for a couple of months and I read a lot of the use of Redux to manage the app states ♻️. So I decided to start a CodeCademy Course called Learn Redux

This is the first proposed project in where we apply Redux in a very simple app that allows the user, to add and subtract a number as they click a button. And the new state will render with every update.

Redux Counter

🚀 You can try it yourself

Some Requirements 📋

  • Use React
  • Import Redux for State Management
  • New state must render with every update

Built with 🔨

  • Visual Code Studio: as code editor
  • React
  • Redux

Development ⌨️

The code has two main divisions, one for the Redux Code and another one for the React Code. Notice also that, as this is my first project using both I did not did different components and everything is developed in my index.js

After installin Redux and importing the {createStore} function I declared my initialState and did my Reducer. The Reducer contemplates two cases and one default: an increment that will take the state and add 1, a decrement that will take the state and subtract 1 and a default that will take the actual value of our state. With the Reducer declared I created my app Store.

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    default:
      return state;
  }
};

const store = createStore(counterReducer);

Now is component time 🕒. Here I created the JSX to create the User Interface. Now here we need a couple things to happen.

🖱️Create a function for the onClick action & a dispatch🖱️

As we need the case "increment" or "decrement" to happen we must create an action for each, this actions are created as functions that returns the action type this way, using the store.dispatch(f) method the reducer is called and the state is updated ↪️.

✈️Send our state to the component✈️

In the ReactDOM.render we are asking React to render our only component. But our component needs the State that is being managed by our Store, so we must send our store.getState() via props so we can use it inside our component

♻️Re-render when the state changes♻️

What use a counter has if we can't see, on real time, the count 1️⃣🔟. For so we need to tell our app to re-render when the Store State changes.

So we will wrap up our ReactDOM.render() in a Render Function that we will not only call but we will also subscribe to ensure that anytime the state changes, it renders.

const render = () => {
  ReactDOM.render(
    <CounterApp state={store.getState()} />,
    document.getElementById("root")
  );
};
render();

// SUBSCRIBE RENDER TO RENDER AT STATE CHANGE
store.subscribe(render);

Run my code 🔧

Install dependencies npm install

Run it npm start

Codefactor

CodeFactor

redux-react-counter's People

Contributors

silviaespanagil avatar

Stargazers

 avatar  avatar

Watchers

 avatar

redux-react-counter's Issues

Add new project?

Can i add some project in this repo for making OSM redux series.

Thank You,
Chetan

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.