react-实战（三）

上次介绍了react-router 和网络请求，这次记录一下redux的使用

1.安装依赖 react-redux redux

2.创建store

src下创建store目录，里面包含 index.ts,reducer.ts,modules 目录，mudules 目录下使我们测试使用的userinfo.ts

index.ts

import { createStore } from 'redux'
import countReducer from './reducer'
​
export default createStore(countReducer)

reducer.ts

import { combineReducers } from "redux"
import userInfo from './modules/userInfo'
​
const Reducer=combineReducers({
    userInfo
})
​
export default Reducer

userinfo.ts

​
type actionType={
    type:string,
    data:number
}
const defaultState:any={
        name:'jerry',
        sex:'m',
        age:100
}
const userInfo = (preState = defaultState, action:actionType)=>{
    const { type, data } = action;
    switch(type){
        case "increment":
            let age=preState.age + data;
            preState.age=age
            return Object.assign({},preState)
        default:
            return preState;
    }
}
export const addAgeAction=(data:number)=>{
    return (dispatch:any)=>{
        dispatch({type:'increment',data:data})
    }
}
export default userInfo

3.项目入口文件index.tsx 去注册store

import { Provider } from 'react-redux'
import store from '@/store'
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
    <BrowserRouter>
        <!-- 加载页面时的loading-->
    <React.Suspense fallback={<Loading />}><App /></React.Suspense>
    
    </BrowserRouter>
    </Provider>
   </React.StrictMode>
);

4.store的简单使用

import { useSelector,useDispatch } from 'react-redux'
import {addAgeAction} from '@/store/modules/userInfo'
​
// useDispatch 只能用在react 组件里
    const userInfo = useSelector((state:any) => {
        return state.userInfo
      })
      
      const dispatch=useDispatch()
      function updateFn(){
          // 注意这里的传参方式
        addAgeAction(20)(dispatch)
        console.log('----store',userInfo)
      }