//store.js
import { createStore,applyMiddleware } from "redux";
import thunk from "redux-thunk";
export const jia=()=>{
return{
type:'increment',
}
}
export const jian=()=>{
return{
type:'decrement',
}
}
const counterReducer = (state = { counter: 0 }, action) => {
switch(action.type){
case 'increment':
return {counter:state.counter+1};
case 'decrement':
return {counter:state.counter-1};
default:
return state;
}
};
const store = createStore(counterReducer,applyMiddleware(thunk));
export default store;
//index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import App from "./App";
import store from "./store";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
//App.js
import React, { memo } from 'react';
// import { NavLink, Outlet, Route,Routes } from 'react-router-dom';
import Home from './pages/Home';
// import About from './pages/About';
// import './App.css';
// import { useDispatch,Provider } from "react-redux";
// import store from './store'
export default memo(function App(){
// const dispatch=useDispatch();
// useEffect(()=>{
// console.log(dispatch)
// },[])
return(
<>
<Home></Home>
</>
)
})
//action.js
export const change=(loading)=>{
return{
type:'count',
loading
}
}
//在home组件中使用
import React, {useEffect } from 'react';
import { useSelector, useDispatch } from "react-redux";
import { jia,jian } from '../../store';
export default function Home() {
const dispatch=useDispatch();
const counter=useSelector((state)=>state.counter);
useEffect(()=>{
console.log(dispatch)
})
const incrementHandler = () => {
dispatch(jia());
};
const decrementHandler = () => {
dispatch(jian());
};
return( <div>
<button onClick={incrementHandler}>+</button>
<button onClick={decrementHandler}>-</button>
<h1>{counter}</h1>
</div>);
}