打造redux中的store

项目目录下/src/创建store/index.ts

  1. // 文件名或者叫models。  用于打造redux构成之一：store
  2. import { createStore, applyMiddleware } from 'redux'
  3. import rootReducer from '../reducers'
  4. import thunk from 'redux-thunk'
  5. //   const store=createStore(rootReducer,中件件执行函数)
  6. const store = createStore(rootReducer, applyMiddleware(thunk))
  7. export default store
  • createstore()
    • 作用：创建包含指定 reducer 的 store 对象
  • applyMiddleware()
    • 作用：应用上基于redux的中间件(插件库)
  • thunk
    • redux异步编程，redux默认不能进行异步处理的，某些时候应用中需要在redux中执行异步任务(ajax，计时器)，就需要使用thunk异步中间件

打造rootReducer

项目目录/src/创建reducers/index.ts

  1. // 打造rootReducer
  2. import{combineReducers} from 'redux'
  3. import homeReducer from './homeReducer'
  4. import adminReducer from './adminReducer'
  5. // 作用：合并多个reducer函数
  7. // rootReducer 统一一处管理项目中的所有reducer
  8. const rootReducer=combineReducers({
  9.     // 数据名：reducer
  10.     home:homeReducer,
  11.     admin:adminReducer
  12. })
  14. export default rootReducer
  • combineReducers()
    • 作用：合并多个reducer函数

项目目录/src/reducers/adminReducer.ts

  1. // adimnReducer 就是admin相关的所有数据都在这里
  2. // 作用：初始化状态，加工状态
  4. todo、1初始话数据
  5. const initState = {
  6.     count: 0,
  7.     numberObj:0
  8. }
  10. // reducer本质是一个函数，接受State，action，返回加工后的状态
  11. // reducer被第一调用时，是store自动触发的，传递的State是undefined
  13. /* 
  14.   state就是状态，也就是数据
  15.   action是一个对象，是由actionCreators发送过来的动作
  16.     reducer 一定有返回值 返回一个新的state，因为state不可更改，所以返回新状态一定是state的拷贝
  17. */
  18. const adminReducer = (state = initState, action: {
  19.     type: string,
  20.     payload: number
  21. }) => {
  22.     switch (action.type) {
  23.         case "setnumberObj":
  24.             return{...state,numberObj:action.payload}
  25.         case "increment":
  26.             return { ...state, count: state.count + action.payload }
  27.         case "decrement":
  28.             return { ...state, count: state.count - action.payload }
  29.         default:
  30.             return { ...state }
  31.     }
  32. }
  33. export default adminReducer

链接通信

项目目录/index.tsx

  1. import。。。
  2. // 使用跨组件通信的方法将store中的数据通信给所有的组件
  3. import { Provider } from 'react-redux'
  4. import store from './store'
  6. ReactDOM.render(
  7.   <Provider store={store}>
  8.       <App />
  9.     </Provider>,
  10. document.getElementById('root')
  11. 。。。
  • Provider让所有组件都可以得到state数据

    组件中使用

    ```typescript import React from ‘react’ import {connect} from ‘react-redux’ import adminActions from ‘../../actions/adminActions’ import { bindActionCreators ,Dispatch} from ‘redux’

function Admin(props: any) { const {increment,decrement,setnumberObj,count,numberObj}=props return (

{setnumberObj(e.target.value)}}/> {count}
) }

export default connect((store:{admin:{count:number}})=>{ return store.admin },(dispatch:Dispatch)=>{ return bindActionCreators(adminActions,dispatch) })(Admin) / connect 有两个参数， 第一个参数用于获取store中的state的 将外部的数据（即state对象）转换为UI组件的标签属性 第二个参数用于获取redux中的actionCreators中创建动作的方法 将分发action的函数转换为UI组件的标签属性 /

  2. - connect
  3.    - 用于包装UI组件生成容器组件
  5. Line34打印结果<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21370038/1621250478217-2f1a4595-52eb-468c-a159-bc6e962eb5c6.png#align=left&display=inline&height=64&margin=%5Bobject%20Object%5D&name=image.png&originHeight=128&originWidth=722&size=51239&status=done&style=none&width=361)<br />[react-redux的connect用法详解](https://blog.csdn.net/yoonerloop/article/details/112058929)<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21370038/1621250617991-f497b281-210d-4e22-961b-3ff568f23a94.png#align=left&display=inline&height=289&margin=%5Bobject%20Object%5D&name=image.png&originHeight=578&originWidth=1942&size=438012&status=done&style=none&width=971)<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21370038/1621252261683-9e83db69-514b-4243-ab7e-d9c3cb4d8159.png#align=left&display=inline&height=374&margin=%5Bobject%20Object%5D&name=image.png&originHeight=748&originWidth=876&size=83146&status=done&style=none&width=438)
  7. - bindActionCreators()
  8.    - 作用是将单个或多个ActionCreator转化为dispatch(action)的函数集合形式。
  10. 开发者不用再手动dispatch(actionCreator(type))，而是可以直接调用方法.<br />可以实现简化书写，减轻开发的负担。
  11. <a name="yKRgH"></a>
  12. # 创建动作对象ActionCreates
  13. 项目目录下/src/新建actions/adminActions.ts
  14. ```typescript
  15. // 书写home的所有action create
  17. const adminActions={
  18.     setnumberObj(val:number){
  19.         return{
  20.             type:"setnumberObj",
  21.             payload:val
  22.         }
  23.     },
  24.     increment(val:number){
  25.         return{
  26.             type:'increment',
  27.             payload:val
  28.         }
  29.     },
  30.     decrement(val:number){
  31.         return{
  32.             type:'decrement',
  33.             payload:val
  34.         }
  35.     }
  36. }
  37. export default adminActions