React-redux概念学习

react-redux.png

React-redux 概述

react-redux 能够使你的React组件从React store中很方便的读取数据，并且向store中分发actions以此来更新数据

React-redux中重要的两个成员

1. Provider：这个组件能够使你整个app都能获取到store中的数据
   。provider 包裹在根组件的最外层，使所有的子组件都可以拿到 state
   。provider 接收 store 作为 props，然后通过 context 往下传递，这样react中任何组件都可以通过 context 获取到 store
2. connect：这个方法能够使组件跟store来进行关联
   。provider 内部组件如果想要使用到 state 中的数据，就必须要 connect 进行一层包裹封装，换一句话来说就是必须要被 connect 进行加强
   。connect 就是方便我们组件能够获取到 store 中的 state

React-redux的基本使用

安装相关依赖

npm install redux react-redux

构建 store 和 reducer

1. 创建 reducer/index.js 文件，构建reducer来响应 actions

const initState = {
    status: false
}

exports.loverReducer = (state = initState, action) => {
    switch (action.type) {
        case 'send_love':
            return {
                status: true
            }
        case 'stop_love':
            return {
                status: false
            }
        default:
            return state;
    }
}

2. 创建 store/index.js 文件，通过 createStore 方法，把我们的 reducer 传入进来

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

export default createStore(loverReducer)

3. 在 app.js 中引入 store

// 导入store
import store from './store';
import { Provider } from 'react-redux'

class App extends React.Component {
    render() {
        return (
            
                

                    Hello world!
                
            

        );
    }
}
ReactDOM.render(, document.getElementById('root'));

搭建页面结构

1. 创建一个组件，名字叫 ComA，里面放一个 button 按钮

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

class Boy extends React.Component {
    constructor(props){
        super(props)
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        let status = this.props.status;
        status?this.props.stopLove():this.props.sendLove();
    }
    render() {
        let status = this.props.status;
        return (
            {status?'停止':'点击'}发射
        )
    }
}

const mapStateToProps = (state)=>{
    return state
}

const mapDispatchToProps = (dispatch) => {
    return {
        sendLove: () => {
            dispatch({
                type: 'send_love'
            })
        },
        stopLove: () => {
            dispatch({
                type: 'stop_love'
            })
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Boy)

2. 创建另一个组件，名字叫 ComB，里面放一个 img，用来显示图片

import React from 'react';
import {connect} from 'react-redux';
import default_img from '../../../assets/images/send_love.jpg' 
import dynamic_img from '../../../assets/images/send_love.gif' 

class Girl extends React.Component {
    render(){
        let status = this.props.status
        return(
            
        )
    }
}

const mapStateToProps = (state)=>{
    return state
}

export default connect(mapStateToProps)(Girl)

3. 在 app.js 中引入两个组件

import React from 'react'
import ReactDOM from 'react-dom';
import Boy from './pages/boy/index'
import Girl from './pages/girl/index'
// 导入store
import store from './store';
import { Provider } from 'react-redux'

class App extends React.Component {
    render() {
        return (
            

                
                
            

        );
    }
}
ReactDOM.render(, document.getElementById('root'));