记录react-redux和router使用

react-redux搭配thunk中间件使用

1.创建子仓库 2.在主仓库中引入，子模块仓库的逻辑

import { applyMiddleware, combineReducers, legacy_createStore as createStore } from 'redux';
import { thunk } from 'redux-thunk';
import { countReducer } from './modules/counter.js';
// import { messageReducer } from './modules/message';
// 为 Redux DevTools 扩展设置
const store = createStore(combineReducers({
    countReducer: countReducer,
    // messageNameSpace: messageReducer
}), applyMiddleware(thunk))

export default store

3.在index.jsx文件中注入store数据

import { RouterProvider } from 'react-router-dom';
import router from './router';
import router from './router';
import { Provider } from 'react-redux';

   <Provider store={store}>
    <RouterProvider router={router}> </RouterProvider>
    </Provider>

4.在组件中使用仓库的数据

import { useDispatch, useSelector } from 'react-redux'
export default function StorePages() {
  const count = useSelector(state => {
    return state.countReducer.count
  })
  const dispatch = useDispatch()
  const buttonClick = function () {
    setTimeout(() => {
      dispatch({
        type: 'inc',
        payload: 100
      })
    }, 500);
  }
  return (
    <div>
      <h1>{count}</h1>
      <button className='button' onClick={buttonClick}>点击</button>
    </div>
  )
}

router使用

1.创建路由表

import { createBrowserRouter } from 'react-router-dom'
const routes = [
...
]
const router = createBrowserRouter(routes)

2.在index.jsx文件中注入路由表

import { RouterProvider } from 'react-router-dom';
import router from './router';

  <RouterProvider router={router}> </RouterProvider>

3.在组件中函数式跳转路由页面

import { Link, Outlet, useNavigate, useParams, useLocation, useSearchParams } from 'react-router-dom'
  const navigate = useNavigate()//跳转钩子函数
    const handleOnClick123 = () => {
    //函数是跳转useNavigate
    navigate('/about/foo/123', { state: { currPath: 'bar' } })
  }
    <button onClick={handleOnClick123}>函数式跳转</button>