react-redux使用hooks替代connect

redux基础用法请看上一篇

上一篇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.js
const 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中的一个工具combineReducers

import { combineReducers } from "redux";
import counter from "./count";

const reducers = combineReducers({
    // 其中为分片式的reducers
    counter,
});

export default reducers;

//store.js
import { 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(
    <Provider store={store}>
        <App />
    </Provider>,
    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 <div className="App">app</div>;
}

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 (
        <div className="App">
            number:{number}
            <button onClick={add}>add</button>
        </div>
    );
}

// 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();
	...
}

下一篇umi和dva实战

umi和dva实战