Heim > Web-Frontend > js-Tutorial > Hauptteil

Teilen Sie ein React-Übungsprojekt

零下一度
Freigeben: 2017-07-23 18:09:34
Original
1828 Leute haben es durchsucht

Das letzte Mal haben wir über die Verwendung von React zum Schreiben einer Homepage mit einem Header gesprochen. Dieses Mal werden wir Redux für die Statusverwaltung in der Praxis verwenden

Teilen Sie ein React-Übungsprojekt

Rudex

Der gesamte Status in der Anwendung wird in einem einzigen Speicher in Form eines Objektbaums gespeichert.
Die einzige Möglichkeit, den Zustand zu ändern, besteht darin, eine Aktion auszulösen, ein Objekt, das beschreibt, was passiert ist.
Um zu beschreiben, wie Aktionen den Zustandsbaum ändern, müssen Sie Reduzierer schreiben.

Als nächstes beginnen wir mit der Statusverwaltung von Anmeldung und Registrierung

Erstellen Sie zunächst den Ordner src im Verzeichnis redux. Das Verzeichnis lautet wie folgt:

digag
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── Teilen Sie ein React-Übungsprojekt.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
    └── Teilen Sie ein React-Übungsprojekt.css
    └── Teilen Sie ein React-Übungsprojekt.js
    └── logo.svg
    └── registerServiceWorker.js
Nach dem Login kopieren

Code hier verfügbar

Denken Sie daran, Abhängigkeiten in package.json

zu aktualisieren. Als Nächstes beginne ich mit der Erklärung des Schlüsselcodes

  • Aktion
    action/users .js

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

/*
 * action 创建函数
 */
export const registerAction = (newUser) => {
  return{
    type:REGISTER_USER,
    data: newUser,
  }
};
// 省略其他 action 创建函数
Nach dem Login kopieren
  • Reducer
    Reducer/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
  }
};
Nach dem Login kopieren
  • 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;
Nach dem Login kopieren

Dann verwenden Sie store

src/Teilen Sie ein React-Übungsprojekt.js

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

ReactDOM.render(
  <provider>
    <app></app>
  </provider>, document.getElementById('root')
);
Nach dem Login kopieren
Aktion und Status in App.js abrufen

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 普通对象
Nach dem Login kopieren
Decorator-Version:

Der Decorator muss in Babel aktiviert werden
Decorator-Plug-in
babel-plugin-transform-decorators-legacy

@connect(
  (state) => {
    console.log(state);
    return ({
      users: state.users,
    });
  },
  {registerActions: registerAction, loginActions: loginAction}
)
Nach dem Login kopieren
Übergeben Sie abschließend

an die Unterkomponente RegisterDialog, registerActions

src/components/Index/RegisterDialog.js

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

  • Aktion aufrufen


    this.props.registerActions(this.state.user); und die Aktion als

{
    type:REGISTER_USER,
    data: this.state.user,
}
Nach dem Login kopieren
  • Reducer zurückgeben, aktualisiert den Status entsprechend zum Aktionstyp

switch (action.type) {
    case REGISTER_USER:
      return state.merge({
        'newUser': action.data,
        'saveSuccess': false,
        'error': null,
      });
//省略其他代码
Nach dem Login kopieren
Zu diesem Zeitpunkt wird der Status in unserem Shop

auf die im Registrierungs-Popup-Fenster gesammelten Daten aktualisiert newUser Bis hierhin Punkt: Es handelt sich immer noch um eine synchrone Aktion, während die Registrierung eine asynchrone Aktion ist.

Das obige ist der detaillierte Inhalt vonTeilen Sie ein React-Übungsprojekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!