redux学習まとめ

記事の目次

redux重要な知識ポイント

Reduxの三大原則

Store

アクション

Reducer

Reduxの三大核心間の関係

reactとreduxを組み合わせて使用するフロー原理

結語

redux重要な知識点
まず、reactの枠組みを学ぶための参考教程を教えてください.以下の内容は私がこの教程に基づいてまとめたものです.redux中国語教程reduxはJavaScript状態容器であり、予測可能な状態管理を提供する.reduxとreactは直接関係がないですが、完璧に組み合わせて使うことができます.簡単に言えば、人気のMVCの三層構造理念の中で、reactは主にView層のデータレンダリングを担当しています.そうすると、reduxは主にModel層のデータストアといくつかの状態管理を担当しています.reduxインストール:

npm install --save redux

多くの場合、redux関連のライブラリをインストールする必要があります.

npm install --save react-redux
npm install --save-dev redux-devtools

Reduxの三大原則
まずreduxの三大原則を紹介します.その各原則は下記の各核心に対応しています.

単一データソース:簡単に言えば、アプリケーション全体において、storeが一つだけ許される.

Stateは読み取り専用です.つまり、stateは変更されてはいけません.新しいstateを生成するには、actionでしかトリガできません.

は、純関数を使用して、ここで修正を実行することは、新しいstateを生成することであり、純関数とは、reducerを意味する.

store、action、reducerが何なのかはまだ分かりませんが、大丈夫です.三つの原則を持って続けてみます.
Store
storeとはreduxのデータ容器で、現在のプロジェクトにあるすべてのデータが格納されていますので、あります.しかも一つだけです.reactフレームと結合して使用する場合、storeは通常、reactフレームのトップの親コンポーネントと結合している.Talk is chep,show you the code:

//   store
let store = createStore(todoApp)

render(
  
    
  ,
  document.getElementById('root')
)

storeに関するいくつかのアプリがありますが、ここでは先に説明しないで、後の内容が役に立つ時に説明します.
アクション
actionは、データをアプリケーション(reactフレームと結合して使用すれば、ここのアプリケーションはreactのcomponentコンポーネント)からstoreに送るペイロードです.それはstoreデータの唯一のソースです.一般的にstore.dispatchを通じてactionをstoreに伝えます.actionは本質的にObjectであり、約束通りに、action内で実行する動作を文字列タイプのtypeフィールドで表さなければならない.異なるactionのtypeは異なる状態を表していますので、stateの更新はactionでしか行えません.以下は4つの異なるactionの例である.

let nextTodoId = 0;
const TODO_ADD = 'TODO_ADD';
export const actionAddTodo = (todo: IToDo) => ({
  type: TODO_ADD,
  id: nextTodoId++,
  todo
});

const TODO_EDIT = 'TODO_EDIT';
export const actionEditTodo = (id: number, todo: IToDo) => ({
  type: TODO_EDIT,
  id,
  todo
});

const TODO_DELETE = 'TODO_DELETE';
export const actionDeleteTodo = (id: number) => ({
  type: TODO_DELETE,
  id
});

const TODO_STATUS = 'TODO_STATUS';
export const actionSetStatusType = (id: number, status: ToDoStatus) => ({
  type: TODO_STATUS,
  id,
  status
});

Reducer
reducerは何をしていますか?簡単です.actionの応答の変化をstoreに送ります.reducerで具体的にactionの状態によってstateを更新する方法を実現しました.Talk is chap,show you the example:

const todoList = (state: IReduxState['todoList'] = [], action: { type: string; } & any) => {
  switch (action.type) {
    case 'TODO_ADD':
      return [
        ...state,
        {
          id: action.id,
          title: action.todo.title,
          text: action.todo.text,
          createdTime: String(new Date()),
          expiredTime: action.todo.expiredTime,
          emailAddress: action.todo.emailAddress,
          status: ToDoStatus.New,
        }
      ]
    case 'TODO_EDIT':
      return state.map(todo =>
        (todo.id === action.id)
          ? {
            id: todo.id,
            title: action.todo.title,
            text: action.todo.text,
            createdTime: todo.createdTime,
            expiredTime: action.todo.expiredTime,
            emailAddress: action.todo.emailAddress,
            status: action.todo.status, 
          }
          : todo
      )
    case 'TODO_DELETE':
      return state.filter(todo => todo.id != action.id)
    case 'TODO_STATUS':
      return state.map(todo =>
        (todo.id === action.id)
          ? { ...todo, status: action.status }
          : todo
      )
    default:
      return state
  }
}

ここで与えた完全なreducerは上のactionに完全に対応しています.友達がいるのが心配です.ここで一つのことを説明します.文中のstateはreducerのパラメータであり、storeの中のデータの一部です.私が言っているactionの状態とは、reducerで異なるaction.typeによってstateを更新するロジックです.ここでもう一つのstoreとreducerの関係を補充します.storeのデータストア構造はreducerと一対一に対応します.これは私のプロジェクトのstoreです.

export type IReduxState = {
  todoList: Array;
  filterStatus: FilterStatus;
  pageStatus: PageStatus;
  id: number;
}

これは私のプロジェクトの最外層reducerです.

const todoApp = combineReducers({
  todoList,
  filterStatus,
  pageStatus,
  id,
});

各store分岐には対応するreducerがありますので、すべてのstateの修正はreducer内で行います.
Reduxの三大核心間の関係
addTodoの操作フローを例にとって、store、action、reducerの関係を述べます.まず外部からdispatch(actionAddTodo)を発行して、storeがデータを更新することを知らせる(注意してください.このactionはtodoというデータを持っています).そしてreducerはこのactionのtypeによってaddTodoと知っていますので、’ToDO_’を実行します.ADD’の論理は、store内のデータを変更します.
reactとreduxが協力して使う流れの原理
reactの一番核心部分はコンポーネントと各コンポーネントの中のパラメータpropsであることを知っています.マクロ的に見ると、reactはreduxデータrenderによってページを出し、データを更新する時、reactはreduxに自分のデータを更新するように通知し、その後reduxデータの変化によってreact所renderの出すページも変化する.redux教程には完全なreactとreduxを組み合わせて使用した小事例があります.勉強を参照してください.次に私は依然としてaddTodo機能の実現でreactとreduxの組み合わせを説明します.(私が提示したケース機能がより強く、typescipt言語を使用しています.)addTodoページ:

import * as React from 'react'
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { actionSetPageType, actionAddTodo } from '../actions/actions';
import { PageStatus, ToDoStatus } from '../interfaces/interfaces';

type AddProps = {
  dispatch?: Dispatch;
}

@(connect() as ClassDecorator)
export default class AddTodo extends React.Component {
  state = {
    title: '',
    text: '',
    expiredTime: '',
    emailAddress: ''
  }
  private jumpToAppPage = () => {
    this.props.dispatch(actionSetPageType(PageStatus.App));
  }

  private changeValue = (e: React.ChangeEvent) => {
    switch (e.target.name) {
      case 'title':
        this.setState({ title: e.target.value });
        break;
      case 'text':
        this.setState({ text: e.target.value });
        break;
      case 'expiredTime':
        this.setState({ expiredTime: e.target.value });
        break;
      case 'emailAddress':
        this.setState({ emailAddress: e.target.value });
        break;
      default:
        break;
    }
  }

  private createTodo = () => {
    const todo = {
      id: 0,
      title: this.state.title,
      text: this.state.text,
      createdTime: '0000',
      expiredTime: this.state.expiredTime,
      emailAddress: this.state.emailAddress,
      status: ToDoStatus.New
    };
    this.props.dispatch(actionAddTodo(todo));
    this.jumpToAppPage();
  }

  render() {
    return (
      

        
Add
        

          Title
          
          

          Text
          
          

          ExpiredTime
          
          

          EmailAddress
          
          

          
        
        Back to List
      
    )
  }
}

このページはreactコンポーネントで構成されています.ページがformフォームのonSubmitイベントをトリガすると、storeはdispachのactionを送信して、データの更新を知らせることができます.そして、上記の3つの関係の流れを続けてstoreデータを更新するまで、最終的にstoreデータの更新により、reactでrenderのページも変わります.todoListページコード:

import * as React from 'react'
import { IReduxState, FilterStatus, ToDoStatus, PageStatus } from '../interfaces/interfaces';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { actionSetPageType, actionDeleteTodo, actionJumpPageId } from '../actions/actions';


const mapStateToProps = (state: IReduxState) => {
  return {
    todoList: state.todoList,
    status: state.filterStatus
  }
}

type TodoListProps = {
  todoList?: IReduxState['todoList'];
  status?: FilterStatus;
  dispatch?: Dispatch;
};
@(connect(mapStateToProps) as ClassDecorator)
export default class TodoList extends React.Component {
  private getVisibleTodoS = () => {
    switch (this.props.status) {
      case FilterStatus.New:
        return this.props.todoList.filter(todo => todo.status === ToDoStatus.New);
      case FilterStatus.Done:
        return this.props.todoList.filter(todo => todo.status === ToDoStatus.Done);
      case FilterStatus.Expired:
        return this.props.todoList.filter(todo => todo.status === ToDoStatus.Expired);
      case FilterStatus.All:
      default:
        return this.props.todoList;
    }
  }

  private jumpToEditPage = (id: number) => {
    this.props.dispatch(actionJumpPageId(id));
    this.props.dispatch(actionSetPageType(PageStatus.Edit));
  }

  private deleteHandler = (id: number) => {
    const result = window.confirm('Are you sure?');
    if (result) {
      this.props.dispatch(actionDeleteTodo(id));
    }
  }

  render() {
    const todoList = this.getVisibleTodoS();
    return (
      
          {todoList.map(todo => (
            {
              Object.values(todo).map(value =>//TODO status
                
              )
            }
              
          ))}
        

        

          
Id
          
Title
          
Text
          
CreatedTime
          
ExpiredTime
          
EmailAddress
          
Status
          

        
        
{value}

                {
return this.jump ToEditPage（todo.id）；
>>Edit
                {" | "}
                {
return this.deleteHandler（todo.id）；
>>Delete
              
            
      
    )
  }
}

おわりに
実は私達がreactとreduxのそれぞれの作用の領域をはっきりさせるのでさえすれば、その2人を結び付けて使っても難しくありません.この知識について分からないところがあれば、コメントエリアのコメントを歓迎します.ニュースを見たらすぐ返事します.最後に、このプロジェクトのコードが多いので、完全なコードはgithubに置いてあります.興味のある友達は自分でダウンロードして使ってもいいです.bashコマンドラインに下記のコードを入力すればプロジェクトを実行できます.

npm run dev

ソースリンク:https://github.com/rookieery/TodoListApp