Movatterモバイル変換

[0]ホーム
URL:

Skip to Content
Codecademy Logo

Core Concepts in Redux

Related learning

  • Enhance your React applications with Redux, a popular state-management library.
    • Intermediate.
      8 hours
  • Implement the Redux state management into your application using core methods of the Redux API.
    • Beginner Friendly.
      5 hours

Introduction To Redux

A React application can share multiple points of data across components. In many cases, managing the data shared can become a complex task.

Redux is a library for managing and updating application states. It provides a centralized “store” for the state that is shared across your entire application, with rules ensuring that the state can only be updated in a predictable fashion using events called “actions”.

Redux works well with applications that have a large amount of global state that is accessed by many of the application’s components. The goal of Redux is to provide scaleable and predictable state management.

Store

In Redux, astore is a container that manages the global state of your application.

As the single source of truth, thestore is the center of every Redux application. It has the ability to update the global state and subscribes elements of an application’s UI to changes in the state. Rather than accessing the state directly, Redux provides functions through the store to interact with the state.

Actions

In Redux, anaction is a plain JavaScript object that represents an intention to change the store’s state. Action objects must have atype property with a user-defined string value that describes the action being taken.

Optional properties can be added to the action object. One common property added is conventionally calledpayload, which is used to supply data necessary to perform the desired action.

/*
Basic action object for a shopping list
that removes all items from the list
*/
const clearItems={
type:'shopping/clear'
}
/*
Action object for a shopping list
that adds an item to the list
*/
const addItem={
type:'shopping/addItem',
payload:'Chocolate Cake'
}

Reducers

In Redux, a reducer, also known as a reducing function, is a JavaScript function that takes the currentstate of the store and anaction as parameters.

Reducers calculate the newstate based on the action it receives. Reducers are the only way the store’s currentstate can be changed within a Redux application. They are an important part of Redux’s one-way data flow model.

/*
 A reducer function that handles 2 actions
 or returns the current state as a default
*/
constshoppingReducer=(
state=[],
  action
)=>{
switch(action.type){
case"shopping/clear":
return[];
case"shopping/addItem":
return[
...state,
        action.payload];
default:
/*
      If the reducer doesn't care
      about this action type, return
      the existing state unchanged
      */
return state;
}
}

Immutable Updates

Immutable updates involve creating a new copy of a mutable value, like an array or object, instead of modifying the original. This ensures data integrity and avoids unexpected behaviors.

Some strategies for ensuring immutable updates are:

  • Using the spread operator (...) to create copies of objects and arrays
  • Ensuring that nested objects are copied and not their references
state=['sleep','work','relax']
const newState={...state,'read'}
/*
newState = ['sleep', 'work', 'relax', 'read']
*/
state={
location:'North Pole',
temperatures:[-10,-14,-9,-18]
}
const newState={
...state,
temperatures:[
...state.temperatures,
-22,-17
]
}
/*
newState = {
  location: 'North Pole',
  temperatures: [-10, -14, -9, -18, -22, -17]
}
*/

Rules of Reducers

Reducers must follow these three rules:

  1. They should only calculate the new state value based on the state and action arguments
  2. They are not allowed to modify the existing state. Instead, they must make immutable updates, by copying the existing state and making changes to the copied values.
  3. They must not do any asynchronous logic or other “side effects”

These rules help support Redux’s scaleable and predictable state management. Some common behaviors to avoid inside reducers are network requests, generating random numbers, and using asynchronous functions.

One-Way Data Flow

Redux follows a one-way data flow model:

  1. Store: The state of an application at a given time
  2. View: The application’s UI is rendered based on the state
  3. Actions: Input from the application interface causes an action to update the state
  4. Store: The UI is updated based on the new state
Store → View → Actions → Store

Learn more on Codecademy

  • Enhance your React applications with Redux, a popular state-management library.
    • Intermediate.
      8 hours
  • Implement the Redux state management into your application using core methods of the Redux API.
    • Beginner Friendly.
      5 hours
[8]ページ先頭
©2009-2025 Movatter.jp