React-redux

概述

react-redux是redux官方出的,用于配合react的绑定库,它能够使你的react组件从redux store中很方便的读取数据,并且向store中分发actions,以此来更新数据,它有两个很重要的成员:Provider、connect:

在这里插入图片描述

Provider

在这里插入图片描述

connect

在这里插入图片描述

小案例解说

案例需求: 一个按钮,点击加1,下方显示数字,默认0

案例思路:

  • 项目中下载redux、react-redux
  • 新建两个组件(ComA、ComB)
  • 新建store文件和reducer文件
  • 然后用react-redux中的Provider组件包裹app.js,并传入全局store(这点很重要)
  • 然后用react-redux中的connect函数来加强刚自定义组件ComA、ComB

代码:

app.js文件

import React from 'react';
import ComA from "./pages/ComA";
import ComB from "./pages/ComB";
import {Provider} from 'react-redux'
import store from './store/store.js'


function App() {
  return (
      <Provider store={store}>       //这里的全局store千万不能忘记传
          <div>
            <ComA />
            <ComB />
          </div>
      </Provider>
  );
}

export default App;

reducer.js文件

const initState={
    value:0
};

exports.reducer=(state=initState,action)=>{
    console.log(action,'action');
    if (action.type === 'add') {
        return {
            value:state.value+1                //注意这里返回的state是一个对象
        }
    } else {
        return state
    }
}

store.js文件

import {createStore} from 'redux'
import {reducer} from '../reducer'

export default createStore(reducer);

ComA.js

import React from "react";
import {connect} from 'react-redux'


 class ComA extends React.Component{

    add=()=>{
        this.props.dispatch({type:'add'})
    };

    render() {
        return(
            <button onClick={this.add}> + </button>
        )
    }
}

const mapDispatchToProps =(dispatch)=>{         //mapDispatchToProps函数返回一个对象,别写错了,这												里可以直接把dispatch方法返回,它也可以自定义封装一												些函数,比如updateState,像下面那样写法
    return {
        dispatch
    };
                                           return {
                                            updateState(){
                                              dispatch({
                                                 type:'add'
                                              })
                                             }             
                                              }
};

export default connect(null,mapDispatchToProps)(ComA)

ComB.js文件

import React from "react";
import {connect} from 'react-redux'

class ComB extends React.Component{
    render() {
        return(
           <div>{this.props.value}</div>
        )
    }
}
const mapStateToProps=(state)=>{
    return state;
};

export default connect(mapStateToProps,null)(ComB)

流程图总结

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读