react 使用HOOK函数在react-redux

1.和connet一样,使用provider包裹整个项目

const store = createStore(rootReducer)

ReactDOM.render(


,
document.getElementById('root')
)

2.useSelect 帮助我们获取store的数据

const num = useSelector(state => state.num);

3.useDispatch() 分发数据

const dispatch = useDispatch()

import React from "react";
import { createStore } from "redux";
import { Provider, useSelector, useDispatch } from "react-redux";

const initialState = { num: 0 };

const reducer = (state, action) => {
switch (action.type) {
case "decrement":
return { ...state, num: state.num - 1 };
case "increment":
return { ...state, num: state.num + 1 };
default:

return state;
}
};

const store = createStore(reducer, initialState);

const ComponentUseReactRedux = () => {
return (


ComponentUseReactRedux






)
}

const ChildComponentUseReactRedux = () => {
const num = useSelector(state => state.num);
const dispatch = useDispatch();
return (


Using useSelector, useDispatch


Number: {num}
<button onClick={() => dispatch({ type: "increment" })}>+
<button onClick={() => dispatch({ type: "decrement" })}>-

);
};

posted @ 2021-02-27 23:52  咱这个需求做不了  阅读(765)  评论(0)    收藏  举报