react文件夹分类

actions

import { post, get } from '@/utils/request'
import { DOLOGIN } from '@/constants/actionTypes'

export const dologin = () => {
  return {
    type: DOLOGIN,
    payload: '',
  }
}

constants

// login 的 type
export const DOLOGIN = 'DOLOGIN'

// home 的 type
export const HOME_DATA = 'HOME_DATA'

reducer

//login.js
import { DOLOGIN } from '@/constants/actionTypes'

const initState = {
  token: '',
}

export default function (state = initState, action) {
  switch (action.type) {
    case DOLOGIN:
      return { ...state, token: action.payload }
  
    default:
      return state
  }
}

//home.js
import { HOME_DATA } from '@/constants/actionTypes'

const initState = {
  data: '',
}

export default function (state = initState, action) {
  switch (action.type) {
    case HOME_DATA:
      return { ...state, token: action.payload }
  
    default:
      return state
  }
}

store.js

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import promise from 'redux-promise'
import thunk from 'redux-thunk'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'
import home from '@/reducer/home'
import login from '@/reducer/login'

// 我要对哪些state做数据持久化
const rootPersistConfig = {
  key: 'root',
  storage: storage,
  stateReconciler: autoMergeLevel2,
}

// 单独为 某个 reduce 做数据持久化
const myPersistReducer = combineReducers({
  home,
  // persistReducer 做数据持久化
  login: persistReducer(
    rootPersistConfig,
    login
  ),
})

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(
  myPersistReducer,
  composeEnhancers(applyMiddleware(promise, thunk))
)

export { store }

index.js

//引入插件
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/lib/integration/react'
import { store } from '@/store'

<Provider store={store}>
    <PersistGate loading={null} persistor={persistStore(store)}>
    </PersistGate>
  </Provider>