So implementieren Sie todoList über die aktualisierte Version von React+Redux

In diesem Artikel wird hauptsächlich die Implementierung der aktualisierten Version von todoList in React+Redux vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Es ist lange her, dass ich Ant-Design-Pro verwendet habe, um mein letztes Projekt zu schreiben Mir fehlen viele Dinge. Ich muss sagen, dass alles, was von Meistern geschrieben wird, Lernkosten oder eine gute Grundlage erfordert, was für React-Neulinge etwas schwierig ist. Deshalb habe ich mich ernsthaft mit der Verwendung von Redux befasst. Ich möchte ein Buch empfehlen, das ich kürzlich gelesen habe und das sehr ausführlich ist: „In-Depth React Technology Stack“. Ohne weitere Umschweife werde ich heute mitteilen, wie ich Redux zum Implementieren einer TodoList verwende. Ich hoffe, dass es für Sie hilfreich sein wird, die Redux verwenden möchten.

(Warum heißt es eine aktualisierte Version? Weil ich zuvor eine todoList ohne Redux geschrieben habe)

Dieses Projekt verwendet die offizielle Create-React-App-Architektur von React , jedes Verzeichnis kann nach seinen eigenen Bedürfnissen aufgeteilt werden. Nachfolgend werden die Inhalte und Funktionen der einzelnen Verzeichnisse erläutert.

public: enthält hauptsächlich statische Ressourcen (Eintrags-HTML-Dateien, Bildressourcen, JSON-Dateien usw.);

src/component: verschiedene Komponenten;

src/layouts: Die gesamte Grundstruktur der Seite besteht hauptsächlich aus Navigation, Fußzeile und Inhalt. Benutzer- und Hinweisdaten werden in Nav angezeigt und die Seitenweiterleitung wird in der Fußzeile geändert.

src/redux:

--src/redux/configureStore: Erzeugt den gesamten Anwendungsspeicher ;

--src/redux/reducers: eine Sammlung aller Reducer;

src/routes: das Gesamtrouting der Seite; gekapselte Tools ;

Ansichten: speichert alle im Projekt anzuzeigenden Seiten

Index: die Eintragsdatei des gesamten Projekts;

2 Implementierung

1. Welche Daten sollen in der gesamten Anwendung im Store gespeichert werden?

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. Verteilung der Reduzierer:

Jeder Zustand entspricht einem Reduzierer, daher sind insgesamt vier Reduzierer in src/redux/reducers erforderlich, und achten Sie auf jeden Der Name des Reduzierers sollte denselben Namen wie der Status haben:

/*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,
});

Jeder Status entspricht einem Reduzierer, daher sollte der Reduzierer wie der Status im Verzeichnis der übergeordneten Komponente der obersten Ebene abgelegt werden, also platzieren Der Reduzierer von taskListData in src/views/TodoList gilt für andere Dinge. Der Code lautet wie folgt:

/*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. Verteilung des Aktionserstellers:

Jede Aktion stellt eine Aktion dar , und die Aktion wird von der Komponente ausgegeben, sodass die Aktion Der Ersteller ist eine separate Datei und wird im Komponentenverzeichnis abgelegt. Beispiel: Aktionsersteller der ListItem-Komponente:

/*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. So verbinden Sie Redux mit der Komponente
react-redux stellt die Verbindungsmethode zum Herstellen einer Verbindung bereit Zustand und Aktion Der Ersteller ist an die Komponente gebunden und wird dann als Requisiten innerhalb der Komponente abgerufen. Das Folgende ist die spezifische Implementierung der TodoList-Seite:

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);

Die Verbindungsmethode hat vier Parameter. Hier sprechen wir hauptsächlich über die ersten beiden Parameter:

(1) mapStateToProps: Der Parameter ist der Status , der erforderlich ist, um die Seite „Alle Zustände“ zurückzugeben; (2) „mapDispatchToProps“: Der Parameter ist „dispatch“, der die von der Seite zu verwendende asynchrone Rückruffunktion zurückgibt.

Sie müssen es gesehen haben, wenn Sie schnellsichtig sind. Wir haben die Methode bindActionCreators aus dem Redux-Paket exportiert. Diese Methode bindet den Dispatch und den Aktionsersteller, um Aktionen auszulösen.

4. Wie löst man den asynchronen Aktionsersteller aus?

Da jeder Aktionsersteller eine asynchrone Funktion ist, übergeben wir der Komponente lediglich die Deklaration der Funktion. Daher müssen wir unsere Middleware einführen und sie einfach beim Generieren des Speichers hinzufügen:

/*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;

Im obigen Code ist Thunk eine Middleware. Wir übergeben die eingeführte Middleware einfach an applyMiddleware.

5. Wo verläuft der Speicher in der Komponente?

Wir gehen definitiv davon aus, dass der Store in der gesamten Anwendung vorhanden ist, daher sollte er sich auf der obersten Ebene der gesamten Anwendung befinden, natürlich ist es das oberste Routing:

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;

Provider ist eine Komponente von React-Redux, die zur Übergabe des Stores an die gesamte Anwendung verwendet wird.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie JS, um mehrere Bildlaufleisten zu steuern, um synchron zu scrollen

So erstellen Sie Vue mit vue-cli +webpack

So verwenden Sie JS zum Schreiben einer Ajax-Anfragefunktion

Chrome Firefox wird mit Debugging-Tools geliefert (ausführliches Tutorial)

Darüber, wie Vue.js das unendliche Scroll-Laden implementiert

Das obige ist der detaillierte Inhalt vonSo implementieren Sie todoList über die aktualisierte Version von React+Redux. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!