学习使用react-redux

有redux了，问什么还要用react-redux

因为react与redux再结合使用时，总是有点问题，所以react-redux就是为了避免出现问题而产生的

使用react-redux的connect

1. 安装

npm i react-redux

2. 创建仓库

// src-->store-->index.js
import {createStore,combineReducers} from 'redux';
import data from './reducer';
export default createStore(combineReducers({data}));

// src-->store-->reducer.js
function ding(state={
    name:"QQ",
    age:21
},action){
    // eslint-disable-next-line
    switch(action.type){
        case 'edit_name':
            return {
                ...state,
                name:action.name
            };
    }
    return state;
}

export default ding;

3. 和视图产生关联

//src-->index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import {Provider} from 'react-redux'
import store from './store';

  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  );

4. 使用connect

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

function Inner(props){

    let {name,age,dispatch} = props

    return (<Fragment>
        <p>name：{name}</p>
        <p>age：{age}</p>
        <button onClick={()=>{
            dispatch({
                type:"edit_name",
                name:"超级QQ"
            })
        }}>超级进化</button>
    </Fragment>)
}
export default connect((state,props)=>{
    return state.data;
})(Inner)

浏览器反馈

使用react-redux的hooks

// src->inner.js
import React,{Fragment} from 'react';
import { connect } from 'react-redux';

function Inner(props){
    console.log(props);

    let {name,age,dispatch} = props

    return (<Fragment>
        <p>name：{name}</p>
        <p>age：{age}</p>
        <button onClick={()=>{
            dispatch({
                type:"edit_name",
                name:"超级QQ"
            })
        }}>超级进化</button>
    </Fragment>)
}
export default Inner

将刚才使用connect的代码改为正常的导出
然后我们需要知道hooks的三个属性

• useSelector(回调函数)：通过回调函数的返回值，来获取state
• useStore()：直接获取整个仓库
• useDispatch：获取仓库中的dispatch()方法

我们在这里实现刚才的功能是就变得简单了许多

import React, { Fragment } from 'react';
import { useSelector, useStore, useDispatch } from 'react-redux'

function Inner() {

    let {name,age} = useSelector((state)=>{
        return state.data
    });

    let dispatch = useDispatch();

    return (<Fragment>
        <p>name: {name} </p>
        <p>age: {age} </p>
        <button onClick={()=>{
            dispatch({
                type:"inner_name",
                name:"暴龙兽"
            })
        }}>进化</button>
    </Fragment>)
}

export default Inner;

浏览器反馈

使用中间件thunk

为什么要使用中间件

因为我们的dispatch是同步方法，会立即执行，我们想使用异步方法时，我们就需要函数，但是dispatch内部是不接受函数的，所以这个时候我们就需要使用thunk来让dispatch来可以接受函数了

如何使用

1. 安装

npm i redux-thunk

2. 通过redux结构出来applyMiddleware，并且引入redux-thunk

import {createStore,combineReducers,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

3. 通过applyMiddleware将redux-thunk传递进来
   因为我们不可以直接使用redux-thunk我们需要先引入一个方法，然后通过参数的形式引入到这个方法内

export default createStore(combineReducers({data}),applyMiddleware(thunk));

4. 现在我们就可以在dispatch内部使用函数了