本文共 5704 字，大约阅读时间需要 19 分钟。

redux基础用法请看上一篇

react-redux中的hook

在react-redux7.1版本之后（如果你的版本比较低又不能升级版本，可以忽略本文）正式推出了三个hook: useDispatch, useSelector和useStore。这些hooks分别用于获取dispatch， 获取状态和获取store对象。接下来我们来对比一下之前的写法和hook的写法。

创建项目

create-react-app react-redux-hooks

安装 redux

yarn add redux --save

安装react-redux

yarn add react-redux

connect版本

//count.jsconst defaultState = {       number: 0,    userInfo: {           name: "wxq",    },};const Init = (state = defaultState, action) => {       switch (action.type) {           case "ADD":            console.log(state);            return {    ...state, number: (state.number += action.data) };        default:            return state;    }};export default Init;

//reducers.js//建立一个总的reducers来管理分片的reducers//管理分片的reducers我们需要借助redux中的一个工具combineReducersimport {    combineReducers } from "redux";import counter from "./count";const reducers = combineReducers({       // 其中为分片式的reducers    counter,});export default reducers;

//store.jsimport {    createStore } from "redux";import reducers from "../models/index";const store = createStore(reducers); //创建仓库export default store; //暴露store

import React from "react";import ReactDOM from "react-dom";import "./index.css";import App from "./App";import {    Provider } from "react-redux";// import models from "./models";import store from "./store";ReactDOM.render(    
           
        
   ,    document.getElementById("root"));// If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

组件

import {    connect } from "react-redux";function App(props) {       console.log(props);    return 
   
    app
   
;}export default connect((state) => state)(App);

hook版

本示例中只用到了useSelector和useDispatch，因为这两个是在组件中最常用的，useStore则要在你需要使用store对象的地方使用。

// import { connect } from "react-redux";import {    useSelector, useDispatch } from "react-redux";function App(props) {       const dispatch = useDispatch();    const {    number } = useSelector((state) => state.counter);    console.log("number:", number);    const user = useSelector((state) => state.user);    console.log(user);    console.log(dispatch);    const add = () => {           dispatch({               type: "ADD",            data: 2,        });    };    return (        
   
                number:{   number}            
    add        
   
    );}// export default connect((state) => state)(App);export default App;

useStore的使用方法

import {    useStore } from 'react-redux';function Foo(props) {   	const store = useStore();	const state = store.getState();	...}

最佳实践

接下来，咱们想使用dva结合hooks分发数据

第一步 安装dva

“dva”: “^2.4.1”,

“dva-core”: “^2.0.4”, “dva-loading”: “^3.0.22”,

yarn add dva --save

yarn add dva-core --save yarn add dva-loading --save

项目目录结构

第二步 在src下新建models目录

接着新建模块aaa.js,bbb.js

index.js

let Init = {       namespace: "aaa",    state: {           name: "这是aaa的model",    },    subscriptions: {   },    effects: {   },    reducers: {   },};export default Init;

let Init = {       namespace: "bbb",    state: {           name: "这是bbb的model",    },    subscriptions: {   },    effects: {   },    reducers: {   },};export default Init;

index.js

import aaa from "./aaa";import bbb from "./bbb";const model = [aaa, bbb];export default model;

第三步 新建utils目录

接着新建dva.js

import {    create } from "dva-core";import createLoading from "dva-loading";let app;let store;let dispatch;function createApp(opt) {       app = create(opt);    app.use(createLoading({   }));    opt.models.forEach((model) => app.model(model));    app.start();    store = app._store;    app.getStore = () => store;    dispatch = store.dispatch;    app.getDispatch = () => dispatch;    return app;}export default {    createApp };

第四步 入口构建store

import React from "react";import ReactDOM from "react-dom";import "./index.css";import App from "./App";import {    Provider } from "react-redux";import models from "./models";import dva from "./utils/dva";console.log(dva);const dvaApp = dva.createApp({       initialState: {   },    models,});const store = dvaApp.getStore();console.log(store);ReactDOM.render(    
           
        
   ,    document.getElementById("root"));// If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

第五步 组件使用

可以正常使用connect，也可以使用hooks

import {    connect } from "react-redux";// import { useSelector, useDispatch } from "react-redux";function App(props) {       console.log(props);    // const dispatch = useDispatch();    // const { name } = useSelector((state) => state.aaa);    // const data = useSelector((state) => state);    // console.log("name:", name);    // console.log("data:", data);    // const user = useSelector((state) => state.user);    // console.log(user);    const add = () => {   };    return (        
   
            
    add        
   
    );}export default connect((state) => state)(App);// export default App;

// import { connect } from "react-redux";import {    useSelector, useDispatch } from "react-redux";function App(props) {       console.log(props);    const dispatch = useDispatch();    const {    name } = useSelector((state) => state.aaa);    const data = useSelector((state) => state);    console.log("name:", name);    console.log("data:", data);    const user = useSelector((state) => state.user);    console.log(user);    const add = () => {           dispatch({               type: "aaa/add",            data: 3,        });    };    return (        
   
            
    add        
   
    );}// export default connect((state) => state)(App);export default App;

下一篇umi和dva实战

转载地址：http://vqcg.baihongyu.com/