今日学习内容

1.redux

2.react-redux

1.redux

1.下载redux：npm install --save redux

2.在src下创建store文件夹，在文件夹内创建index.js文件,写入：

//1.引入redux
import {createStore} from 'redux'
import reducer from './reducer'
//2.创建store对象
let store = createStore(reducer)
//3.暴露
export default store

3.在store文件夹或者components文件夹内创建（两个都行，看个人习惯）组件对应的请求数据js文件， testReducer.js

import {TEXT_CHANGE} from '../store/actionsName'

let obj = {             //创建模拟数据
    name:"leiyuhang",
    age:23
}

let testReducer=(state=obj,action)=>{
    switch(action.type){
        case TEXT_CHANGE:
            return {...state,name:state.name="mayun"+action.num}
        default:
            return state    
    }
}

export default testReducer

4.将每个组件对应的数据请求文件合并到一起， reducer.js

import testReducer from '../components/testReducer'//将文件引入进来

import {combineReducers} from 'redux'   //引入redux中合并的方法combineReducers

let reducer = combineReducers({
    testReducer
})

export default reducer

5.将请求事件名封装到一个自定义文件内, actionsType.js

import {TEXT_CHANGE} from './actionsName'
export let ADD = (num)=>{
    //return {type:"CHANGE",num}  直接将事件名写到这
    return {type:TEXT_CHANGE,num}
}

6.将请求的事件名封装到一个js文件内，actionsName.js(或者直接省去这一步，直接将事件名写到第5步的type后)

export let TEXT_CHANGE = 'CHANGE'

7.创建jsx文件请求redux数据

import React, { Component } from 'react'
import store from '../store/index'      //引入index文件
import {ADD} from '../store/actionsType'    //将封装请求的事件名文件引进来

export default class text extends Component {
    constructor(props){
        super(props)
        this.state={
            text:store.getState().testReducer.name  //获取store中请求的数据，使用getState(),假如将每个请求的数据都写到单独的文件内，获取数据就需要在getState()后写上".xxxxx"
        }
    }
    componentDidMount(){
        store.subscribe(()=>{       //监听器：每当请求的数据改变时，该方法就会修改this.state中的数据，页面重新渲染
            this.setState({
                text:store.getState().testReducer.name
            })
        })
    }
    change=()=>{        //通过事件调用函数的方式请求数据，使用dispatch方法
        store.dispatch(ADD(66)) //一般修改事件名写成大写
    }
    render() {
        return (
            <div>
                <h1>{this.state.text}</h1>
                <button onClick={this.change}>点击修改name</button>
            </div>
        )
    }
}

2.react-redux

一个react的插件，专门用来简化react应用中使用redux

为什么使用react-redux？

because之前的写法redux与react的耦合度过于高。代码不够简洁（组件中出现了大量的store对象）

如何使用react-redux？

1.下载：npm install --save react-redux

2.使用：

①：在index.js中引用react-redux，并使用其中的Provider这个方法，以标签的方法包裹所有子组件

import {BrowserRouter} from 'react-router-dom';
import store from './store/store'
import {Provider} from 'react-redux'
ReactDOM.render(

  <BrowserRouter>
    <Provider store={store}>    //包裹开始，在全局分发store
        <App />
    </Provider>                 //包裹结束
  </BrowserRouter>

  ,
  document.getElementById('root')
);

②：在需要接收数据的页面引入react-redux中connect这个高阶组件的方法

import React, { Component } from 'react'
// import store from '../store/store'
import {connect} from 'react-redux' //引入react-redux中connect这个高阶组件的方法

class faxian extends Component {
    constructor(props){
        super(props)
        this.state={
            text:this.props.state.testReducer.name  //在页面使用this.props.state.xxx.xxx
        }
    }
    render() {
        return (
            <div>
                发现
                {this.state.text}
            </div>
        )
    }
}
//在connect高阶组件中把state当成一个形参传进来，用来接收store中的数据

③：如何用react-redux修改数据

import React, { Component } from 'react'
// import store from '../store/store'
import {connect} from 'react-redux' //引入react-redux中connect这个高阶组件的方法
import {CHANGE} from '../store/actionType'
class faxian extends Component {
    constructor(props){
        super(props)
        this.state={
            text:this.props.state.testReducer.age  //在页面使用this.props.state.xxx.xxx
        }
    }
    fun=()=>{
        //使用this.props.dispatch方法就可以直接修改数据，不用setState方法去修改数据，
        //因为在connect高阶组件中react已经封装好所有操作
        //比如说：this.props哪里来的呢？就是connect高阶组件中已经封装好了的，我们直接使用就行了
        
        this.props.dispatch(CHANGE(3))
    }
    render() {
        return (
            <div>
                发现
                {this.props.state.testReducer.age}
                //通过触发事件调用函数修改参数
                <button onClick={this.fun}>点击修改数据</button>
            </div>
        )
    }
}
//在connect高阶组件中把state当成一个形参传进来，用来接收store中的数据
export default connect(state=>({state}))(faxian)