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" })}>-
);
};

浙公网安备 33010602011771号