Maison > interface Web > js tutoriel > Partager un projet de pratique React

Partager un projet de pratique React

零下一度
Libérer: 2017-07-23 18:09:34
original
1850 Les gens l'ont consulté

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

Partager un projet de pratique React

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
Copier après la connexion
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 创建函数
Copier après la connexion
  • 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
  }
};
Copier après la connexion
  • 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;
Copier après la connexion
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')
);
Copier après la connexion

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 普通对象
Copier après la connexion
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}
)
Copier après la connexion
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});
      }
    });
  };
Copier après la connexion

    Appeler l'action

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

{
    type:REGISTER_USER,
    data: this.state.user,
}
Copier après la connexion
    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,
      });
//省略其他代码
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal