Comment implémenter todoList via la version mise à niveau de React+Redux

Cet article présente principalement l'implémentation de la version améliorée de todoList dans React+redux. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Cela fait longtemps que je n'ai pas blogué. Récemment, j'utilise ant-design-pro d'Ant Financial pour écrire mon projet final. J'écris, il manque beaucoup de choses, je ne comprends pas, je dois dire que tout ce qui est écrit par des maîtres nécessite des coûts d'apprentissage, ou une bonne base, ce qui est un peu difficile pour les novices de React. J'ai donc réfléchi sérieusement à la façon d'utiliser Redux. J'aimerais recommander un livre que j'ai lu récemment et qui est assez détaillé : "In-owned React Technology Stack". Sans plus tarder, je vais partager aujourd'hui comment j'utilise redux pour implémenter une todoList. J'espère que cela vous sera utile qui souhaite utiliser redux.

(Pourquoi s'appelle-t-on une version mise à niveau ? Parce que j'ai déjà écrit une todoList sans redux)

Ce projet utilise l'architecture officielle create-react-app de React , chaque répertoire peut être divisé selon ses propres besoins. Le contenu et les fonctions de chaque répertoire sont expliqués ci-dessous.

public : contient principalement des ressources statiques (fichiers html d'entrée, ressources images, fichiers JSON, etc.) ;

src/component : différents composants ;

src/layouts : l'ensemble La structure de base de la page est principalement constituée de la navigation, du pied de page et du contenu. Les données d'utilisateur et d'avis sont affichées dans Nav et le routage des pages est commuté dans Content. Le pied de page est corrigé

src/redux :

--src/redux/configureStore : génère l'intégralité du magasin d'applications ; ;

--src/redux/reducers : une collection de tous les réducteurs ;

src/routes : le routage global de la page

src/utils : self- outils encapsulés ;

vues : stocke toutes les pages à afficher dans le projet ;

index : le fichier d'entrée de l'ensemble du projet

2. mise en œuvre

1. Quelles données doivent être stockées dans le magasin dans l'ensemble de l'application ?

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. Répartition des réducteurs :

Chaque état correspond à un réducteur, donc un total de quatre réducteurs sont nécessaires. Fusionnez tous les réducteurs dans src/redux/reducers, et faites attention. Le nom de chaque réducteur doit avoir le même nom que l'état :

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

Chaque état correspond à un réducteur, donc comme l'état, le réducteur doit être placé dans le répertoire du composant parent de niveau supérieur, donc taskListData Le réducteur est placé dans src/views/TodoList Il en va de même pour les autres Le code est le suivant :

/*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. Répartition du créateur d'action :

Chaque action. représente une action, et l'action est représentée par Le composant est émis, placez donc le créateur d'action dans un fichier séparé et placez-le dans le répertoire du composant. Par exemple : action créateur du composant 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. Comment connecter redux au composant

react-redux fournit la méthode de connexion pour connecter l'état, liez-le au composant avec le créateur d'action, puis obtenez-le sous forme d'accessoires à l'intérieur du composant. Voici l'implémentation spécifique de la page 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);

La méthode connect a quatre paramètres Ici, nous parlons principalement des deux premiers paramètres :

(1) mapStateToProps : Le paramètre. est l'état, retournez à la page Tous les états requis ;

(2) mapDispatchToProps : le paramètre est dispatch et la fonction de rappel asynchrone à utiliser pour renvoyer la page.

Vous devez l'avoir vu si vous êtes perspicace. Nous avons exporté la méthode bindActionCreators du package redux. Cette méthode lie la répartition et le créateur d'action pour déclencher des actions.

4. Comment déclencher un créateur d'action asynchrone ?

Parce que chaque créateur d'action est une fonction asynchrone, ce que nous transmettons au composant n'est que la déclaration de la fonction, nous devons donc introduire notre middleware, il suffit de l'ajouter lors de la génération du magasin :

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

Dans le code ci-dessus, thunk est un middleware Nous transmettons simplement le middleware introduit dans applyMiddleware.

5. Où passe le magasin dans le composant ?

Nous penserons certainement que le magasin existe dans toute l'application, il devrait donc être au niveau supérieur de toute l'application, bien sûr, c'est le routage supérieur :

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 est un composant de React-Redux, et sa fonction est de transmettre le magasin dans l'ensemble de l'application.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser JS pour contrôler plusieurs barres de défilement pour faire défiler de manière synchrone

Comment créer vue à l'aide de vue-cli +webpack

Comment écrire une fonction de requête Ajax à l'aide de JS

Chrome Firefox est livré avec des outils de débogage (tutoriel détaillé)

À propos de la façon dont Vue.js implémente le chargement par défilement infini

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!