Heim >Web-Frontend >js-Tutorial >Verwenden Sie Rohoperationen „react-redux'.

Verwenden Sie Rohoperationen „react-redux'.

php中世界最好的语言
php中世界最好的语言Original
2018-06-09 11:56:411290Durchsuche

Dieses Mal erkläre ich Ihnen, welche Vorsichtsmaßnahmen für die Verwendung von React-Redux im Ursprung gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

React-Redux selbst implementieren

Ich habe bereits versucht, einen React-Redux selbst zu implementieren. In diesem Blog wird hauptsächlich der Prozess der Implementierung eines React-Redux selbst aufgezeichnet .

Dieses React-Redux weist noch ein paar kleinere Mängel auf, die ich am Beispiel eines Counters implementiert habe.

Dies ist die Verzeichnisstruktur:

Die connect.js-Datei hier ist React-Redux.

├─component
│   connect.js
│   counter.js
│
└─store
    index.js

index.js:

import React from "react";
import ReactDom,{render} from "react-dom";
import Couter from "./component/counter";
import {Provider} from "./component/connect" import store from "./store/index"  ReactDom.render(<Provider store={store}><Couter/></Provider>,document.getElementById("root"));

./store/index.js:

import {createStore} from "redux";
function reducer(state={number:0},action) {
  switch (action.type){
    case "add":
      return {number:state.number+action.count}
    default:
      return state;
  }
}
export default createStore(reducer);

./component/connect.js:

import React from "react";
import PropTypes from "prop-types";
//Provider是一个组件 接受一个store属性 将其内容挂载在上下文context //这样后代才可以都有办法拿到 class Provider extends React.Component{
  static childContextTypes={
    //设置上下文的类型是对象
 store:PropTypes.object
 }
  getChildContext(){
    //获取并设置后代上下文的内容
 return {store:this.props.store}
  }
  render(){
    return this.props.children
 }
}
let connect=(mapStateToProps,mapDispatchToProps)=>(comp)=>{
  return class Proxy extends React.Component{
    static contextTypes={
      store:PropTypes.object
 }
    constructor(props,context){
      super(props);
      //将参数mapStateToProps 的解构赋值 代理组件的状态
 this.setState=mapStateToProps(context.store.getState())
    }
    componentDidMount(){
      this.context.store.subscribe(()=>{
        this.setState(mapStateToProps(this.context.store.getState()))
      })
    }
    render(){
      return <comp {...this.state} {...mapDispatchToProps(this.context.store.dispatch)}/>
    }
  }
}
export {Provider,connect}

./ Component/counter.js:

import React from "react";
import {connect} from "./connect";
export default class Counter extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return (
      <p>
        <button onClick={()=>{
          this.props.add(5);
        }}>+</button>
        {this.props.n}
      </p>
    )
  }
}
let mapStateToProps=(state)=>{
  return {n:state.number}
};
let mapDispatchToProps=(dispatch)=>{
  return {
    add:(count)=>{
      dispatch({type:"add",count:count})
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Counter)

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Importieren und Verwenden der Vue-Cli-Komponente

So erhalten Sie WeChat-Autorisierung und Anmeldung bei vue

Das obige ist der detaillierte Inhalt vonVerwenden Sie Rohoperationen „react-redux'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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