React+redux アップグレード版による todoList の実装方法

この記事では、react+redux での todoList のアップグレード版の実装を中心に紹介します。編集者が非常に良いと思ったので、参考として共有します。編集者をフォローして見てみましょう

久しぶりにブログを書いていますが、最近は Ant Financial の ant-design-pro を使って最終デザインを書いています。マスターが書いたものはすべて学習コストや十分な基礎が必要であることは言うまでもなく、React 初心者にとっては少し難しいです。そこで、Redux の使用方法について真剣に検討しました。最近読んでいる、非常に詳細な本をお勧めしたいと思います。それは、「In- Depth React Technology Stack」です。早速ですが、今日は redux を使用して todoList を実装する方法を紹介します。redux を使用したいと考えている方の参考になれば幸いです。

(なぜアップグレード版と呼ばれるのですか? 以前 redux を使わずに todoList を書いたからです)

このプロジェクトは、react の公式 create-react-app アーキテクチャを使用しており、各ディレクトリは独自のニーズに応じて分割できます。各ディレクトリの内容と機能を以下に説明します。

public: 主に静的リソース (エントリ HTML ファイル、画像リソース、JSON ファイルなど) が含まれます。

src/component: さまざまなコンポーネント;

src/layouts: 主にナビゲーション、フッター、 コンテンツ 。ユーザーと通知のデータはナビゲーションに表示され、ページのルーティングはコンテンツで固定されます。

src/redux:

--src/redux/configureStore: アプリケーション全体のストアを生成します。 / redux/reducers: すべてのリデューサーのコレクション

src/utils: プロジェクトに表示されるすべてのページを保存します。

index: プロジェクト エントリ ファイル全体。

2. アプリケーション全体のストアにどのデータを保存するか?

const initialState = {
  taskListData: { //任务列表
    loading: false,
    error: false,
    taskList: [],
  }, 
  userData: { //用户信息
    loading: false,
    error: false,
    user: {},
  },
  noticeListData: { //通知列表
    loading: false,
    error: false,
    noticeList: [],
  },
  taskData: { //任务详情，在详情页使用
    loading: false,
    error: false,
    task: {},
  }
};

2. リデューサーの配布:

各状態はリデューサーに対応するため、src/redux/reducers 内のすべてのリデューサーをマージし、各リデューサーの名前が同じである必要があることに注意してください。状態として:

/*redux/reducers.js*/
import { combineReducers } from 'redux';
import userReducer from '../component/User/indexRedux';
import noticeReducer from '../component/Notice/indexRedux';
import todoListReducer from '../views/TodoList/indexRedux';
import taskReducer from '../views/Detail/indexRedux';

export default combineReducers({
  userData: userReducer,
  noticeListData: noticeReducer, 
  taskListData: todoListReducer,
  taskData: taskReducer,
});

各状態はリデューサーに対応するため、状態と同様に、リデューサーは最上位の親コンポーネントのディレクトリにある必要があるため、taskListData のリデューサーを src/views/TodoList に配置します。その他のコードは次のとおりです:

/*views/TodoList/indexRedux.js*/
const taskListData = {
  loading: true,
  error: false,
  taskList: []
};
//不同的action;
const LOAD_TASKLIST = 'LOAD_TASKLIST';
const LOAD_TASKLIST_SUCCESS = 'LOAD_TASKLIST_SUCCESS';
const LOAD_TASKLIST_ERROR = 'LOAD_TASKLIST_ERROR';
const ADD_TASK = 'ADD_TASK';
const UPDATE_TASK = 'UPDATE_TASK';
const DELETE_TASK = 'DELETE_TASK';
function todoListReducer (state = { taskListData }, action) {
  switch(action.type) {
    case LOAD_TASKLIST: {
      return {
        ...state,
        loading: true,
        error: false,
      }
    }
    case LOAD_TASKLIST_SUCCESS: {
      return {
        ...state,
        loading: false,
        error: false,
        taskList: action.payload,
      };
    }
    case LOAD_TASKLIST_ERROR: {
      return {
        ...state,
        loading: false,
        error: true
      };
    }
    case UPDATE_TASK: {
      const index = state.taskList.indexOf(
        state.taskList.find(task => 
          task.id === action.payload.id));
      console.log(index);
      state.taskList[index].status = !state.taskList[index].status;
      return {
        ...state,
        taskList: state.taskList,
      };
    }
    case DELETE_TASK: {
      const index = state.taskList.indexOf(
        state.taskList.find(task => 
          task.id === action.payload.id));
      state.taskList.splice(index, 1);
      return {
        ...state,
        taskList: state.taskList,
      };
    }
    case ADD_TASK: {
      let len = state.taskList.length;
      let index = len > 0 ? len - 1 : 0;
      let lastTaskId = index !== 0 ? state.taskList[index].id : 0; 
      state.taskList.push({
        id: lastTaskId + 1,
        name: action.payload.name,
        status: false,
      });
      return {
        ...state,
        taskList: state.taskList,
      }
    } 
    default: {
      return state;
    }
  }
}
export default todoListReducer;

3. アクション クリエーターの配布:

各アクションはアクションを表し、アクションはコンポーネントによって発行されるため、アクション クリエーターは別のファイルとしてコンポーネント ディレクトリに配置されます。例: ListItem コンポーネントのアクション作成者:

/*ListItem/indexRedux.js*/
//处理更新任务状态后和删除任务后的taskList的状态;
const UPDATE_TASK = 'UPDATE_TASK';
const DELETE_TASK = 'DELETE_TASK';
//action creator，更新和删除任务
export function updateTask (task) {
  return dispatch => {
    dispatch({
      type: UPDATE_TASK,
      payload: task,
    });
  }
}
export function deleteTask (task) {
  return dispatch => {
    dispatch({
      type: DELETE_TASK,
      payload: task,
    });
  }
}

3. redux をコンポーネントに接続する方法

react-redux は、状態とアクションの作成者をコンポーネントにバインドし、props を使用する connect メソッドを提供します。コンポーネントメソッド内で取得します。 TodoList ページの具体的な実装は次のとおりです。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import List from '../../component/List';
import { loadTaskList } from '../../component/List/indexRedux';
import { updateTask, deleteTask } from '../../component/ListItem/indexRedux';
import { addTask } from '../../component/SubmitDialog/indexRedux';
class TodoList extends Component {

  render () {
    return (
      <List {...this.props} />
    );
  }
}
export default connect( state => {
  return {
    loading: state.taskListData.loading,
    error: state.taskListData.error,
    taskList: state.taskListData.taskList,
  };
}, dispatch => {
  return {
    loadTaskList: bindActionCreators(loadTaskList, dispatch),
    updateTask: bindActionCreators(updateTask, dispatch),
    deleteTask: bindActionCreators(deleteTask, dispatch),
    addTask: bindActionCreators(addTask, dispatch),
  };
})(TodoList);

connect メソッドには 4 つのパラメーターがあります。ここでは主に最初の 2 つのパラメーターについて説明します。

(1) mapStateToProps: パラメーターは状態であり、必要なすべての状態を返します。 page;

(2 ) mapDispatchToProps: パラメーターはディスパッチであり、ページを返すために使用される非同期コールバック関数です。 勘のいい人なら見たことがあるはずです。redux パッケージから bindingActionCreators メソッドをエクスポートしました。このメソッドはディスパッチとアクション クリエーターをバインドしてアクションをトリガーします。

4. 非同期アクションクリエイターをトリガーするにはどうすればよいですか?

各アクションクリエーターは非同期関数であるため、コンポーネントに渡すのは関数の宣言だけであるため、ミドルウェアを導入する必要があります。ストアを生成するときにそれを追加するだけです:

/*redux/configureStore.js*/
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';
const initialState = {
  taskListData: {
    loading: false,
    error: false,
    taskList: [],
  }, 
  userData: {
    loading: false,
    error: false,
    user: {},
  },
  noticeListData: {
    loading: false,
    error: false,
    noticeList: [],
  },
  taskData: {
    loading: false,
    error: false,
    task: {},
  }
};
let enhancer = applyMiddleware(thunk);
let store = createStore(
  reducers,
  initialState,
  enhancer,
);
export default store;

上記のコードでは、サンクはミドルウェアです。導入したミドルウェアを applyMiddleware に渡すだけです。

5. ストアはコンポーネントのどこに渡されますか?

ストアはアプリケーション全体に存在すると考えられるため、一般的なプロジェクトの場合は、もちろん最上位のルーティングである必要があります:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import BasicLayout from '../layouts';
import store from '../redux/configureStore';
class RouterApp extends Component {
  render () {
    return (
      <Provider store={store}>
        <Router>
          <Route path="/" component={BasicLayout} />
        </Router>
      </Provider>
    );
  }
}
export default RouterApp;

プロバイダーは反応のコンポーネントです。 -redux 、その機能はストアをアプリケーション全体に渡すことです。

上記は私があなたのためにまとめたものです。

関連記事:

JSを使用して複数のスクロールバーを制御して同期スクロールする方法

vue-cli+webpackを使用してvueを構築する方法

JSを使用してAjaxリクエスト関数を作成する方法

Chrome Firefox 以降のデバッグ ツールによるデバッグ (詳細なチュートリアル)

Vue.js が無限スクロール読み込みを実装する方法について

以上がReact+redux アップグレード版による todoList の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。