Giter VIP home page Giter VIP logo

actions's Introduction

Actions

Actions are the only way to trigger changes to the store's state.

Actions are simple POJOs with a mandatory type key and optional payload keys containing new info.

Actions get sent using store.dispatch() and are the primary drivers of the Redux loop.

Using action creators

When an action is dispatched, any new state data must be passed along ad the payload.

The example below passed a payload key of fruit with the new state data. 'orange':

    const addOrange = {
        type: "ADD_FRUIT",
        fruit: 'orange',
    }

    store.dispatch(addOrange);
    console.log(store.getState()); // ['orange']

However, when these action payloads are generated dynamically, it becomes necessary to extrapolate the creation of the action object into a function.

These functions are called action creators.

The JavaScript objects they return are the actions.

To initiate a dispatch, you pass the result of calling an action creator to store.dispatch()

For Example, an action creator function to create "ADD_FRUIT" action looks like this:

    const addFruit = (fruit) => {
            type: "ADD_FRUIT",
            fruit,
    }

Now we can add any fruit to the store using our action creator addFruit(fruit), instead of having to define an object for each fruit:

    store.dispatch(addFruit('apple'));
    store.dispatch(addFruit('strawberry'));
    store.dispatch(addFruit('lychee'));
    console.log(store.getState()); // [ 'orange', 'apple', 'strawberry', 'lychee' ]

Preventing typos in action type string literals

Update your actions to include 'ADD_FRUIT', 'ADD_FRUITS', 'SELL_FRUIT', and 'SELL_OUT':

    const ADD_FRUIT = 'ADD_FRUIT';
    const ADD_FRUITS = 'ADD_FRUITS';
    const SELL_FRUIT = 'SELL_FRUIT';
    const SELL_OUT = 'SELL_OUT';

    const addFruit = (fruit) => ({
    type: ADD_FRUIT,
    fruit,
    });

    const addFruits = (fruits) => ({
    type: ADD_FRUITS,
    fruits,
    });

    const sellFruit = (fruit) => ({
    type: SELL_FRUIT,
    fruit,
    });

    const sellOut = () => ({
    type: SELL_OUT,
    });

Cnstants are used for all the fruit action types.

This is to prevent simple typos in the reducers case clauses

Reviewing a completed Fruit Stand example

Check repo folder

actions's People

Contributors

miguelcoria94 avatar

Watchers

 avatar

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.