fix:study9

react/study9/first-demo/src/App.js

@@ -1,6 +1,6 @@
 import logo from './logo.svg';
 import './App.css';
-import Counter from './components/Counter.jsx'
+import Counter from './components/counter/Counter.jsx'
 
 function App() {
   return (

react/study9/first-demo/src/components/Counter.jsx → react/study9/first-demo/src/components/counter/Counter.jsx

@@ -1,5 +1,7 @@
-import './Counter.css'
-import {addOne,reduceOne,addFree} from '../store/slice/counter'
+// import './Counter.css'
+import Style from './counter.module.css'
+import {addTwo,getAsyncAdd} from './counterslice'
+// import {addOne,reduceOne,addFree} from '../../store/slice/counter'
 import { useDispatch, useSelector } from 'react-redux';
 import { useRef } from 'react';
 function Counter() {
@@ -8,23 +10,26 @@ function Counter() {
         return state.counter.value
     })
     let dispatch = useDispatch()
-    let inputRef = useRef(null)
+    // let inputRef = useRef(null)
     return(
-        <div className='counter'>
+        <div className={Style.box}>
             <p>计数器:{count}</p>
             <p>
                 <button onClick={()=>{
-                    dispatch(addOne())
+                    dispatch(addTwo())
                 }}>增加</button>
                 &nbsp;&nbsp;
                 <button onClick={()=>{
+                    dispatch(getAsyncAdd)
+                }}>异步添加</button>
+                {/* <button onClick={()=>{
                     dispatch(reduceOne())
-                }}>减少</button>
+                }}>减少</button> */}
             </p>
             <p>
-                <input type="text" ref={inputRef} /><button onClick={()=>{
+                {/* <input type="text" ref={inputRef} /><button onClick={()=>{
                     dispatch(addFree(inputRef.current.value-0))
-                }}>添加</button>
+                }}>添加</button> */}
             </p>
         </div>
     )

react/study9/first-demo/src/components/counter/counter.module.css

@@ -0,0 +1,4 @@
+.box {
+    border:1px solid #f00;
+    width: 500px;
+}

react/study9/first-demo/src/components/counter/counterslice.js

@@ -0,0 +1,26 @@
+import {createSlice} from '@reduxjs/toolkit'
+
+export const counterSlice = createSlice({
+    name:"counter",
+    initialState:{
+        value:10,
+        aa:'我的名字'
+    },
+    reducers:{
+        addTwo(state) {
+            state.value++
+        }
+    }
+})
+
+export const {addTwo} = counterSlice.actions;
+export default counterSlice.reducer;
+
+
+export function getAsyncAdd(dispatch,getState){
+    let state = getState();
+    console.log(state,'异步')
+    setTimeout(()=>{
+        dispatch(addTwo())
+    },1000)
+}

react/study9/first-demo/src/store/index.js

@@ -1,12 +1,13 @@
 import {configureStore} from '@reduxjs/toolkit';
 
-import counterReducer from './slice/counter'
-import uerReducer from './slice/user'
-
+// import counterReducer from './slice/counter'
+// import uerReducer from './slice/user'
+import newCounterReducer from '../components/counter/counterslice'
 const store = configureStore({
     reducer:{
-        counter: counterReducer,
-        user: uerReducer
+        // counter: counterReducer,
+        // user: uerReducer
+        counter:newCounterReducer
     }
 })