Code Monkey home page Code Monkey logo

practice-for-week-15-react-redux-actions-reducer's Introduction

Practice: Action Creator and Reducer Setup

In this short practice, you will load an array of articles into Redux state. You will then create an action creator and a reducer. When the action creator sends an action to the reducer, the reducer will update the global state (or not) based on the action type. You will connect the reducer to the store and test your action creator using the window object in the browser DevTools.

Setup

Click the Download Project button at the bottom of this page to go to the starter repo, then load the repo into CodeSandbox.

You should also add the Redux DevTools to your browser extensions if you have not done so already. To add the extension in Chrome, go here. For other browsers, search in your extension/add-on menu for Redux DevTools and follow the instructions for adding it to your browser.

Action Creator

Start by creating an articleReducer.js file in the src/store directory.

Since there is no database, import the data that is stored in src/data/data.json, assigning it to the variable name articles. This data will be used as the payload for the action creator you are about to create.

Define and export an action creator function called loadArticles. It should have a type key with a constant variable value of LOAD_ARTICLES. (Before your action creator, declare your LOAD_ARTICLES constant variable and assign it the string 'article/loadArticles'.) The loadArticles action creator should also have a payload of the articles that were imported. You can put the payload under the key articles.

If you have done this correctly your code will look similar to this:

import articles from '../data/data.json';

const LOAD_ARTICLES = 'article/loadArticles';

export const loadArticles = () => {
  return {
    type: LOAD_ARTICLES,
    articles
  };
};

Reducer

Write an initialState variable that is assigned to an object. The object should hold an array with the key of entries and the value of an empty array. The object should also hold another key, isLoading, with a boolean value of true.

Create an articleReducer function. Every reducer function takes two arguments, state and action. Inside the reducer function, create a switch/case statement that switches based on an action's type. The first action type it should check for is LOAD_ARTICLES. If action.type is LOAD_ARTICLES, it should return a new copy of the state object and update the entries array with the articles payload from the loadArticles action creator. Be sure not to mutate the original state! As the default case, simply return the original state. Finally, make articleReducer the default export for this file.

If you are successful, your added code should be similar to this:

const initialState = { entries: [], isLoading: true };

const articleReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOAD_ARTICLES:
      return { ...state, entries: [...action.articles] };
    default:
      return state;
  }
};

export default articleReducer;

Connect the reducer to Redux

In the root index.js file of your store directory, import the articleReducer reducer using the variable name articleReducer. Now, add this reducer to the combineReducers function, giving it a key of articleState and a value of articleReducer.

Test on the Window

To test if your reducer is working, go to your root index.js and

  1. Import the loadArticles action creator from ./store/articleReducer.js
    • Remember: named exports need to be wrapped in { } when being imported.
  2. Add this code beneath your store variable:
if (process.env.NODE_ENV !== 'production') {
  window.store = store;
  window.loadArticles = loadArticles;
}

This will put the store and loadArticles "on the window", effectively making them global variables that you can access from your browser's console (or anywhere else in your application). While this can be very useful when debugging, it can also create issues if you end up accidentally--i.e., without realizing it--accessing things on the window in other files. So it is generally a good idea to take things off the window once you are done testing them. In particular you NEVER want to leave things on the window in production, hence the conditional wrapping.

In your sandbox browser, click the button to Open In New Window. In the Console tab of the DevTools in this new window, type the following code:

store.dispatch(loadArticles())

If all is working correctly, you should see the redux-logger data in the console. It will show the prev state with an article.entries array of 0, the action, and the next state with five articles in the article.entries array.

redux-logger

What you have learned

Congratulations! In this practice you have learned how to

  1. Create an action creator
  2. Create a reducer
  3. Test an action creator on the window of the browser using redux-logger

practice-for-week-15-react-redux-actions-reducer's People

Contributors

aa-assessment-project-manager[bot] avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  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.