Partager un projet de pratique React

La dernière fois, nous avons parlé d'utiliser React pour écrire une page d'accueil avec un en-tête. Cette fois, nous utiliserons Redux pour la gestion de l'état en pratique

Rudex

Tous les états de l'application sont stockés dans un seul magasin sous la forme d'une arborescence d'objets.

La seule façon de changer d'état est de déclencher une action, un objet qui décrit ce qui s'est passé.
Pour décrire comment les actions modifient l'arbre d'état, vous devez écrire des réducteurs.

Nous allons ensuite commencer la gestion des statuts de connexion et d'inscription

Créez d'abord le dossier

sous le répertoire src, le répertoire est le suivant redux

digag
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── Partager un projet de pratique React.html
│   └── manifest.json
└── src
    └── components
        └── Index
            └── Header.js
            └── LoginDialog.js
            └── RegisterDialog.js
    └── containers
        └── App
            └── App.js
            └── App.css
    └── redux
        └── action
            └── users.js
        └── reducer
            └── auth.js
            └── users.js
        └── sagas
            └── api.js
            └── sagas.js
            └── selectors.js.js
            └── users.js
        └── store
            └── store.js
    └── App.test.js
    └── Partager un projet de pratique React.css
    └── Partager un projet de pratique React.js
    └── logo.svg
    └── registerServiceWorker.js

code Disponible à partir d'ici

N'oubliez pas de mettre à jour les dépendances dans

package.json

Ensuite, je commencerai à expliquer le code clé

• action

  action/users .js
  

/*
 * action 类型
 */
export const REGISTER_USER = 'REGISTER_USER';
// 省略其他action 类型

/*
 * action 创建函数
 */
export const registerAction = (newUser) => {
  return{
    type:REGISTER_USER,
    data: newUser,
  }
};
// 省略其他 action 创建函数

• réducteur

  réducteur/users.js
  

//Immutable Data 就是一旦创建，就不能再被更改的数据。
//对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。
import Immutable from 'immutable';
//从 action 导入需要的 action 类型
import {REGISTER_USER, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE} from '../action/users';

// 初始化状态
const initialState = Immutable.fromJS({
  newUser: null,
  error: null,
  saveSuccess: false,
});

//  reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。
export const users = (state = initialState, action = {}) => {
  switch (action.type) { // 判断 action 类型
    case REGISTER_USER:  
      return state.merge({   // 更新状态
        'newUser': action.data,
        'saveSuccess': false,
        'error': null,
      });
    case REGISTER_USER_SUCCESS:
      return state.set('saveSuccess', action.data);
    case REGISTER_USER_FAILURE:
      return state.set('error', action.data);
    default:
      return state
  }
};

• store

  store/store.js
  

import {createStore, combineReducers, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga'
import * as reducer from '../reducer/users';

import rootSaga from '../sagas/sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  combineReducers(reducer),
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

export default store;

Ensuite, utilisez

store

src/Partager un projet de pratique React.js

Obtenir l'action et le statut dans App.js

import {Provider} from 'react-redux';
import store from './redux/store/store';
// 省略其他

ReactDOM.render(
  <provider>
    <app></app>
  </provider>, document.getElementById('root')
);

Version du décorateur :

import {registerAction, loginAction} from '../../redux/action/users';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
 //省略其他

class App extends Component {

  render(){
    return(
      <div>
        //省略
      </div>
    )
  }

}

export default connect(
  (state) => {
// 获取状态   state.users  是指 reducer/users.js 文件中导出的 users
// 可以 `console.log(state);` 查看状态树
  return { users: state.users }
},
  (dispatch) => {
  return {
// 创建action
    registerActions: bindActionCreators(registerAction, dispatch),
    loginActions: bindActionCreators(loginAction, dispatch),
  }
})(App);
// 在App 组件的props里就有 this.props.users  this.props.registerActions this.props.loginActions 了
// 需要注意的是这里this.props.users是Immutable 对象，取值需要用this.props.users.get('newUser') 
// 也可在 reducer 里改用 js 普通对象

Besoin d'activer le décorateur dans Babel

Plug-in du décorateur

babel-plugin-transform-decorators-legacy

Enfin, passez

@connect(
  (state) => {
    console.log(state);
    return ({
      users: state.users,
    });
  },
  {registerActions: registerAction, loginActions: loginAction}
)

au sous-composant RegisterDialog,

registerActionssrc/components/Index/RegisterDialog.js

Le processus est :

// 省略其他代码
 handleSubmit = (e) => {
    e.preventDefault();
    // 验证表单数据
    this.refs.user.validate((valid) => {
      if (valid) {
        // this.state.user 为表单收集的 用户注册数据
        this.props.registerActions(this.state.user);
        this.setState({loading: true});
      }
    });
  };

Appeler l'action

• 
  renvoie l'action car this.props.registerActions(this.state.user);
  

{
    type:REGISTER_USER,
    data: this.state.user,
}

le réducteur met à jour le statut en fonction le type d'action

À ce moment, le statut dans notre magasin

switch (action.type) {
    case REGISTER_USER:
      return state.merge({
        'newUser': action.data,
        'saveSuccess': false,
        'error': null,
      });
//省略其他代码

est mis à jour avec les données collectées dans la fenêtre contextuelle d'inscription

Jusqu'à présent il s'agit toujours d'une action synchrone, tandis que l'enregistrement est une action asynchrone. newUser

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!