redux初始化

redux 初识化的步骤几乎相同！！几乎都是复制重用

1.安装 redux 相关的包：

redux ： 集中式储存状态，主要包
react-redux： 是Redux提出的React绑定库
redux-thunk： 中间件-可以再里面进行函数操作

• 注意redux-thunk我这里下载的是2.3.0的版本，最新版有BUG
• 使用TS的时候在redux-thunk@2.4.0新版中，使用dispatch的时候，会丢失提示

redux-devtools-extensio：调试工具，需要搭配Redux DevTools组件

npm i redux react-redux redux-thunk@2.3.0 redux-devtools-extension

2.目录

- store
---- index.ts
---- actions
------------ 模块1.ts  # 给 dispatch提供action
------------ 模块2.ts
---- reducers
------------ index.ts  # 会引入并合并 模块1, 模块2
------------ 模块1.ts

3. 初识化

store/index.ts中

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './reducers'

const middlewares = composeWithDevTools(applyMiddleware(thunk))
const store = createStore(rootReducer, middlewares)

export default store

store/reducers/index.ts 中：

import { combineReducers } from 'redux'

import login from './login'

const rootReducer = combineReducers({
  login
})

export default rootReducer

store/reducers/login.ts 中：

const initialState = {}

const login = (state = initialState, action: any) => {
  return state
}

export default login

src/index.tsx 中：

import ReactDOM from 'react-dom'
import './index.scss'
import App from './App'
import { Provider } from 'react-redux'
import store from './store'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

4.检查效果

拓展 - 配置Redux的相关类型

src/types/store.d.ts 中

import { ThunkAction } from 'redux-thunk'
import store from '../store'

// Redux 应用的状态
export type RootState = ReturnType<typeof store.getState>

// -------------------- Redux 对象形式的 action 的类型 ---------------------------

// 登录相关的 action 类型
export type LoginAction = {}
// 文章相关的 action 类型
export type ArticleAction = {}
// 等等
type RootAction = LoginAction | ArticleAction

// 使用 thunk 中间件后的 Redux dispatch 类型
// ReturnType：thunk action 的返回类型，项目中几乎都是返回 Promise
// State: Redux 的状态  RootState
// ExtraThunkArg: 额外的参数，没有用到，可以指定为 unknown
// BasicAction: 非 thunk action，即对象形式的 action
export type RootThunkAction = ThunkAction<
  void,
  RootState,
  unknown,
  RootAction
>

实例操作：

一个登录发送请求需要做的操作