front-end-dictionary
/
react-redux.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>redux相关资源 | 前端宝典</title>
    <meta name="generator" content="VuePress 1.9.7">

    <meta name="description" content="涵盖常见面试题、开发工具介绍">

    <link rel="preload" href="/front-end-dictionary/assets/css/0.styles.2a5baad3.css" as="style"><link rel="preload" href="/front-end-dictionary/assets/js/app.88ed2bc2.js" as="script"><link rel="preload" href="/front-end-dictionary/assets/js/2.22fea77d.js" as="script"><link rel="preload" href="/front-end-dictionary/assets/js/8.f5e643c9.js" as="script"><link rel="prefetch" href="/front-end-dictionary/assets/js/10.c7840575.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/11.564b3bac.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/12.3de2e7ff.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/13.8666c730.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/14.d8abfcfe.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/15.15ad8667.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/16.854da236.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/17.d6fe8b8b.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/18.32323657.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/19.21b2db1c.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/20.6d96ceec.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/21.14370795.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/22.44f2db92.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/3.099dce6b.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/4.47f3f56c.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/5.f118685e.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/6.b79a085d.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/7.94eeef1c.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/9.e180f19c.js">
    <link rel="stylesheet" href="/front-end-dictionary/assets/css/0.styles.2a5baad3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-dictionary/" class="home-link router-link-active"><img src="http://www.itheima.com/images/logo.png" alt="前端宝典" class="logo"> <span class="site-name can-hide">前端宝典</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://www.itheima.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  黑马官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue相关" class="dropdown-title"><span class="title">vue相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue相关" class="mobile-dropdown-title"><span class="title">vue相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="vue-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-router相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-vuex.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vuex相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-ssr.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  服务器端渲染
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-project.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  项目相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-v3.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue3相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="react相关" class="dropdown-title"><span class="title">react相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="react相关" class="mobile-dropdown-title"><span class="title">react相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="react-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  react基础
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  react-router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-redux.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  redux相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-hooks.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Hooks相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-other.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  其他相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序和uni-app" class="dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序和uni-app" class="mobile-dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="wxxcx.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  原生小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="uni-app.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app开发
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/front-end-dictionary/tools.html" class="nav-link">
  开发工具
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://www.itheima.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  黑马官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue相关" class="dropdown-title"><span class="title">vue相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue相关" class="mobile-dropdown-title"><span class="title">vue相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="vue-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-router相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-vuex.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vuex相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-ssr.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  服务器端渲染
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-project.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  项目相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-v3.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue3相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="react相关" class="dropdown-title"><span class="title">react相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="react相关" class="mobile-dropdown-title"><span class="title">react相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="react-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  react基础
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  react-router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-redux.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  redux相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-hooks.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Hooks相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-other.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  其他相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序和uni-app" class="dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序和uni-app" class="mobile-dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="wxxcx.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  原生小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="uni-app.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app开发
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/front-end-dictionary/tools.html" class="nav-link">
  开发工具
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>redux相关资源</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-dictionary/react-redux.html#_1、相关资源" class="sidebar-link">1、相关资源</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/front-end-dictionary/react-redux.html#_2、面试题" class="sidebar-link">2、面试题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#redux是什么" class="sidebar-link">Redux是什么</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#redux核心概念有哪些-及作用" class="sidebar-link">redux核心概念有哪些，及作用</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#如何定义action" class="sidebar-link">如何定义action</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#如何定义reducer" class="sidebar-link">如何定义reducer</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#如何创建store" class="sidebar-link">如何创建store</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#store-有哪些常用方法" class="sidebar-link">store 有哪些常用方法</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#页面组件中如何使用redux" class="sidebar-link">页面组件中如何使用redux</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#redux数据流是什么样的" class="sidebar-link">redux数据流是什么样的</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#redux如何实现模块化" class="sidebar-link">redux如何实现模块化</a></li></ul></li><li><a href="/front-end-dictionary/react-redux.html#_1、相关资源-2" class="sidebar-link">1、相关资源</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/front-end-dictionary/react-redux.html#_2、面试题-2" class="sidebar-link">2、面试题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#react-redux-是什么" class="sidebar-link">react-redux 是什么</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#如何使用react-redux" class="sidebar-link">如何使用react-redux</a></li></ul></li><li><a href="/front-end-dictionary/react-redux.html#_1、redux-thunk" class="sidebar-link">1、redux-thunk</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题" class="sidebar-link">问题</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题-2" class="sidebar-link">问题</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题-3" class="sidebar-link">问题</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题-4" class="sidebar-link">问题</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题-5" class="sidebar-link">问题</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题-6" class="sidebar-link">问题</a></li></ul></li><li><a href="/front-end-dictionary/react-redux.html#_2、redux" class="sidebar-link">2、redux</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题-7" class="sidebar-link">问题</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题-8" class="sidebar-link">问题</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题-9" class="sidebar-link">问题</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题-10" class="sidebar-link">问题</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题-11" class="sidebar-link">问题</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/react-redux.html#问题-12" class="sidebar-link">问题</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="redux相关资源"><a href="#redux相关资源" class="header-anchor">#</a> <code>redux</code>相关资源</h1> <h2 id="_1、相关资源"><a href="#_1、相关资源" class="header-anchor">#</a> 1、相关资源</h2> <h2 id="_2、面试题"><a href="#_2、面试题" class="header-anchor">#</a> 2、面试题</h2> <h3 id="redux是什么"><a href="#redux是什么" class="header-anchor">#</a> <code>Redux</code>是什么</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>定义：Redux 是 React 中最常用的状态管理工具（状态容器）</p></li> <li><p>好处：集中的进行共享数据的状态管理，减少了组件间通信的复杂度</p> <img src="assets/image-20220508232927784.png" alt="image-20220508232927784" style="zoom:60%;"></li></ul></details> <h3 id="redux核心概念有哪些-及作用"><a href="#redux核心概念有哪些-及作用" class="header-anchor">#</a> <code>redux</code>核心概念有哪些，及作用</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>核心概念</p> <ul><li><strong>action</strong>   动作    要做的事情</li> <li><strong>reducer</strong> 函数    完成动作，更新状态</li> <li><strong>store</strong> 仓库   整合 action 和 reducer</li></ul></li> <li><p>数据流： <strong>action -&gt; reducer -&gt; store</strong></p></li> <li><p>类比：</p> <ul><li>action：相当于公司中要做的事情，比如软件开发、测试，打扫卫生等</li> <li>reducer：相当于公司的员工，负责干活的</li> <li>store：相当于公司的老板</li></ul></li> <li><p>流程：</p> <ul><li>老板(store)分配公司中要做的事情(action)给员工(reducer)，</li> <li>员工(reducer)干完活(action)把结果(state)交给老板</li></ul></li></ul></details> <h3 id="如何定义action"><a href="#如何定义action" class="header-anchor">#</a> 如何定义<code>action</code></h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>描述： 一个action就是一个对象，描述了要做的事情</p></li> <li><p>定义：<code>{ type:&quot;任务名称&quot;, payload:数据 }</code></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">&quot;addCount&quot;</span><span class="token punctuation">,</span><span class="token literal-property property">payload</span><span class="token operator">:</span><span class="token number">10</span> <span class="token punctuation">}</span>  <span class="token comment">// 将count进行增加，增加10</span>
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">&quot;reduceCount&quot;</span><span class="token punctuation">,</span><span class="token literal-property property">payload</span><span class="token operator">:</span><span class="token number">5</span> <span class="token punctuation">}</span>  <span class="token comment">// 将count进行减少， 减少5</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></li></ul></details> <h3 id="如何定义reducer"><a href="#如何定义reducer" class="header-anchor">#</a> 如何定义<code>reducer</code></h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>描述： 一个<code>reducer</code>就是一个纯函数，定义了初始的状态，根据<code>action</code>的type不同，执行不同的逻辑，最新状态给<code>store</code></p></li> <li><p>定义：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> initState <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">key</span><span class="token operator">:</span>默认数据
<span class="token punctuation">}</span>
<span class="token keyword">const</span> <span class="token function-variable function">reducer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token operator">=</span>initState<span class="token punctuation">,</span>action</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">case</span> <span class="token string">&quot;类型1&quot;</span><span class="token operator">:</span>
        	执行逻辑<span class="token number">1</span>代码<span class="token punctuation">;</span>
         	<span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>state<span class="token punctuation">,</span>
                <span class="token literal-property property">key</span><span class="token operator">:</span>新值<span class="token number">1</span>
            <span class="token punctuation">}</span>
        <span class="token keyword">case</span> <span class="token string">&quot;类型2&quot;</span><span class="token operator">:</span>
        	执行逻辑<span class="token number">2</span>代码<span class="token punctuation">;</span>
         	<span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>state<span class="token punctuation">,</span>
                <span class="token literal-property property">key</span><span class="token operator">:</span>新值<span class="token number">2</span>
            <span class="token punctuation">}</span>
        <span class="token keyword">default</span><span class="token operator">:</span>
        	<span class="token keyword">return</span> state
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 默认状态</span>
<span class="token keyword">const</span> initState <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">count</span><span class="token operator">:</span><span class="token number">100</span>
<span class="token punctuation">}</span>
<span class="token comment">// 员工</span>
<span class="token keyword">const</span> <span class="token function-variable function">reducer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token operator">=</span>initState<span class="token punctuation">,</span>action</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 添加任务</span>
        <span class="token keyword">case</span> <span class="token string">&quot;addCount&quot;</span><span class="token operator">:</span>
         	<span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>state<span class="token punctuation">,</span>
               <span class="token literal-property property">count</span><span class="token operator">:</span>state<span class="token punctuation">.</span>count<span class="token operator">+</span>action<span class="token punctuation">.</span>payload
            <span class="token punctuation">}</span>
        <span class="token comment">// 减少任务</span>
        <span class="token keyword">case</span> <span class="token string">&quot;reduceCount&quot;</span><span class="token operator">:</span>
         	<span class="token keyword">return</span> <span class="token punctuation">{</span>
                 <span class="token operator">...</span>state<span class="token punctuation">,</span>
               <span class="token literal-property property">count</span><span class="token operator">:</span>state<span class="token punctuation">.</span>count<span class="token operator">-</span>action<span class="token punctuation">.</span>payload
            <span class="token punctuation">}</span>
        <span class="token keyword">default</span><span class="token operator">:</span>
        	<span class="token keyword">return</span> state
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div></li></ul></details> <h3 id="如何创建store"><a href="#如何创建store" class="header-anchor">#</a> 如何创建<code>store</code></h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>安装 redux</p> <div class="language-ssh line-numbers-mode"><pre class="language-text"><code>yarn add redux
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>创建实例</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// store/index.js</span>

<span class="token comment">////////////////////////////////////1. 导入创建仓库方法</span>
<span class="token comment">// 老版本语法是直接导入createStore，新版本要导入legacy_createStore</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> legacy_createStore  <span class="token keyword">as</span>  createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span>

<span class="token comment">////////////////////////////////////2. 定义reducer函数</span>
<span class="token comment">// 默认状态</span>
<span class="token keyword">const</span> initState <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">count</span><span class="token operator">:</span><span class="token number">100</span>
<span class="token punctuation">}</span>
<span class="token comment">// 员工</span>
<span class="token keyword">const</span> <span class="token function-variable function">reducer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token operator">=</span>initState<span class="token punctuation">,</span>action</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 添加任务</span>
        <span class="token keyword">case</span> <span class="token string">&quot;addCount&quot;</span><span class="token operator">:</span>
         	<span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>state<span class="token punctuation">,</span>
               <span class="token literal-property property">count</span><span class="token operator">:</span>state<span class="token punctuation">.</span>count<span class="token operator">+</span>action<span class="token punctuation">.</span>payload
            <span class="token punctuation">}</span>
        <span class="token comment">// 减少任务</span>
        <span class="token keyword">case</span> <span class="token string">&quot;reduceCount&quot;</span><span class="token operator">:</span>
         	<span class="token keyword">return</span> <span class="token punctuation">{</span>
                 <span class="token operator">...</span>state<span class="token punctuation">,</span>
               <span class="token literal-property property">count</span><span class="token operator">:</span>state<span class="token punctuation">.</span>count<span class="token operator">-</span>action<span class="token punctuation">.</span>payload
            <span class="token punctuation">}</span>
        <span class="token keyword">default</span><span class="token operator">:</span>
        	<span class="token keyword">return</span> state
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">////////////////////////////////////3. 创建仓库实例</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>reducer<span class="token punctuation">)</span>
<span class="token comment">/////////////////////////////////// 4.暴露</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> store
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div></li></ul></details> <h3 id="store-有哪些常用方法"><a href="#store-有哪些常用方法" class="header-anchor">#</a> <code>store</code> 有哪些常用方法</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>获取状态：<strong><code>store.getState()</code></strong>    【老板获取结果】</li> <li>派发任务：**<code>store.dispatch({ type:&quot;任务名称&quot;, payload:&quot;数据&quot; })</code> **  【老板派发任务】
<ul><li><strong>dispatch方法一旦调用，reducer函数就会执行</strong>，相当于老板(store)派发(dispatch)任务(action)给员工(reducer)，员工(reducer)就去执行(函数处理)了任务(action)，将最新结果(state)返回给老板(store)</li></ul></li> <li>监听数据变化：<strong><code>store.subscrib(()=&gt;{ 仓库数据变化就执行该函数 })</code></strong></li></ul></details> <h3 id="页面组件中如何使用redux"><a href="#页面组件中如何使用redux" class="header-anchor">#</a> 页面组件中如何使用<code>redux</code></h3> <details class="custom-block details"><summary>点击查看答案</summary> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span>

<span class="token comment">// 1. 导入仓库实例</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./store'</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 2. 读取仓库数据</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> count  <span class="token punctuation">}</span> <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
        	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            	</span><span class="token punctuation">{</span><span class="token comment">/* 5. 页面中通过 dispatch 触发 action， 让reducer执行，重新返回新state */</span><span class="token punctuation">}</span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span>store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">&quot;reduceCount&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">payload</span><span class="token operator">:</span><span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                    减少5
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            	count的数据是</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text">
    			</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span>store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">&quot;addCount&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">payload</span><span class="token operator">:</span><span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        			增加10
    			</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 3. 监听数据变化,subscrib调用之后返回卸载监听的方法</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>unsubscrib <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">subscrib</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// setState 一旦调用，render函数重新执行，重新读取数据</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
	<span class="token function">componentWillUnMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 4. 组件销毁了，要卸载监听</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">unsubscrib</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div></details> <h3 id="redux数据流是什么样的"><a href="#redux数据流是什么样的" class="header-anchor">#</a> <code>redux</code>数据流是什么样的</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><ol><li>页面 通过<code>getState</code>读取数据</li></ol></li> <li><ol start="2"><li>页面 通过<code>dispatch</code> 触发action</li></ol></li> <li><ol start="3"><li>仓库 <code>reducer</code>函数执行，计算新状态，返回给store</li></ol></li> <li><ol start="4"><li>页面通过<code>subscribe</code>监听数据变化，重新调用<code>getState</code>获取新数据</li></ol></li> <li>页面==&gt;dispatch==&gt; action ==&gt; reducer ===&gt; 新state ==&gt;页面</li></ul> <p><img src="/front-end-dictionary/assets/img/image-20220509000347213.0d48d550.png" alt="image-20220509000347213"></p> <p><strong>动态图案例展示</strong></p> <p><img src="/front-end-dictionary/assets/img/ReduxDataFlow.49fa8c39.c98922b5.gif" alt="image-20220509000347213"></p></details> <h3 id="redux如何实现模块化"><a href="#redux如何实现模块化" class="header-anchor">#</a> <code>redux</code>如何实现模块化</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>思想： 一个老板（store），如果只有一个员工（reducer）比如是保洁阿姨，只能处理一类事情(action)，比如保洁相关工作；但是如果有很多员工（reducer），那么就可以做很多类别不同的事情。</p></li> <li><p>实现： 定义多个<code>reducer</code>函数，处理不同的类别方向的事情， 最后合并成一个大的<code>reducer</code>，给<code>store</code></p></li> <li><p><strong>简而言之：一个reducer函数就是一个模块</strong></p></li> <li><p>代码：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// store/reducer/user.js  【模块user】</span>
<span class="token keyword">const</span> initState <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">token</span><span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">userInfo</span><span class="token operator">:</span><span class="token string">''</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> userReducer <span class="token operator">=</span> <span class="token punctuation">(</span>state<span class="token operator">=</span>initState<span class="token punctuation">,</span>action<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 用if判断也可以</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;user/setToken&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token operator">...</span>state<span class="token punctuation">,</span>
            <span class="token literal-property property">token</span><span class="token operator">:</span>action<span class="token punctuation">.</span>payload
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;user/setUser&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token operator">...</span>state<span class="token punctuation">,</span>
            <span class="token literal-property property">userInfo</span><span class="token operator">:</span>action<span class="token punctuation">.</span>payload
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> state
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// store/reducer/news.js   【模块news】</span>
<span class="token keyword">const</span> initState <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">list</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">page</span><span class="token operator">:</span><span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> newsReducer <span class="token operator">=</span> <span class="token punctuation">(</span>state<span class="token operator">=</span>initState<span class="token punctuation">,</span>action<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">switch</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">case</span> <span class="token string">&quot;news/setList&quot;</span><span class="token operator">:</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>state<span class="token punctuation">,</span>
                <span class="token literal-property property">list</span><span class="token operator">:</span>actio<span class="token punctuation">.</span>payload
            <span class="token punctuation">}</span>
        <span class="token keyword">case</span> <span class="token string">&quot;news/setPage&quot;</span><span class="token operator">:</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>state<span class="token punctuation">,</span>
                <span class="token literal-property property">page</span><span class="token operator">:</span>actio<span class="token punctuation">.</span>payload
            <span class="token punctuation">}</span>
        <span class="token keyword">default</span><span class="token operator">:</span>
        	<span class="token keyword">return</span> state
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// store/reducer/index.js</span>
<span class="token comment">// 1. 导入合并函数</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> combineReducers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span>
<span class="token comment">// 2. 导入子reducer函数</span>
<span class="token keyword">import</span> user <span class="token keyword">from</span> <span class="token string">'./user.js'</span>
<span class="token keyword">import</span> news <span class="token keyword">from</span> <span class="token string">'./news.js'</span>
<span class="token comment">// 3. 生成大的reducer函数</span>
<span class="token comment">// combineReducers({ 模块名:reducer函数 })</span>
<span class="token keyword">const</span> reducer <span class="token operator">=</span> <span class="token function">combineReducers</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    user<span class="token punctuation">,</span>news
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 4. 暴露</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> reducer
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// store/index.js</span>

<span class="token keyword">import</span> <span class="token punctuation">{</span> legacy_createStore  <span class="token keyword">as</span>  createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span>
<span class="token comment">// 5. 导入根reducer函数</span>
<span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">'./reducers'</span>
<span class="token comment">// 6. 创建仓库使用根reducer函数</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>reducer<span class="token punctuation">,</span>middlewares<span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> store
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div></li></ul></details> <h1 id="react-redux相关资源"><a href="#react-redux相关资源" class="header-anchor">#</a> <code>react-redux</code>相关资源</h1> <h2 id="_1、相关资源-2"><a href="#_1、相关资源-2" class="header-anchor">#</a> 1、相关资源</h2> <h2 id="_2、面试题-2"><a href="#_2、面试题-2" class="header-anchor">#</a> 2、面试题</h2> <h3 id="react-redux-是什么"><a href="#react-redux-是什么" class="header-anchor">#</a> <code>react-redux</code> 是什么</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>定义：<code>react-redux</code> 是一个库，用来连接<code>react</code>和<code>redux</code>的（默认redux是和react之间不是必然联系的），帮助我们在页面中更好的访问仓库数据，类似vuex里面的辅助函数的作用一样</li></ul> <img src="assets/image-20220509001844595.png" alt="image-20220509001844595" style="zoom:50%;"></details> <h3 id="如何使用react-redux"><a href="#如何使用react-redux" class="header-anchor">#</a> 如何使用<code>react-redux</code></h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p><strong>描述：</strong> 通过<code>connect</code>函数将仓库里面的数据注入到组件中，并给dispatch注入到组件中使用</p></li> <li><p><code>index.js</code>中</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">// 其他代码...</span>

<span class="token comment">// 1. 导入Provider组件</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Provider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span>
<span class="token comment">// 2. 导入仓库实例</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./store/index'</span>

<span class="token keyword">const</span> root <span class="token operator">=</span> ReactDOM<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token punctuation">{</span><span class="token comment">/* 3. 注入仓库实例 */</span><span class="token punctuation">}</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Provider</span></span> <span class="token attr-name">store</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>store<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
   	</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Provider</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div></li> <li><p>组件中</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">// App.js 如果是类组件</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token comment">// 4. 导入 connect 函数</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> connect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span>dispatch  <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
        	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">&quot;reduceCount&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">payload</span><span class="token operator">:</span><span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                    减少5
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            	count的数据是</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text">
    			</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">&quot;addCount&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">payload</span><span class="token operator">:</span><span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        			增加10
    			</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// 5. connect函数对组件进行处理，将state数据注入到组件props中； 并且给组件props里提供dispatch方法</span>
<span class="token comment">// 语法：connect(mapStateToProps,mapDispatchToProps)(App)</span>
<span class="token comment">/*
 //===&gt; 【将state数据注入到组件props中】
 const mapStateToProps = (state,props)=&gt;{
    // 返回一个对象，将对象里面的内容注入到组件的props
    return { count:state.count }   // props里面将会有count
 }
 // 关于mapDispatchToProps下节展示
*/</span>

<span class="token keyword">const</span> <span class="token function-variable function">mapStateToProps</span> <span class="token operator">=</span> <span class="token parameter">state</span><span class="token operator">=&gt;</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">count</span><span class="token operator">:</span>state<span class="token punctuation">.</span>count
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span>mapStateToProps<span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span>

<span class="token comment">// 【数据变化，页面会自动更新！】</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">// App.js 如果是函数组件</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    	<span class="token keyword">const</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> add <span class="token punctuation">,</span> reduce<span class="token punctuation">}</span> <span class="token operator">=</span> props  <span class="token comment">// 注意props里面没有dispatch了</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
        	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                    减少5
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            	count的数据是</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text">
    			</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        			增加10
    			</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 语法：connect(mapStateToProps,mapDispatchToProps)(App)</span>
<span class="token keyword">const</span> <span class="token function-variable function">mapStateToProps</span> <span class="token operator">=</span> <span class="token parameter">state</span><span class="token operator">=&gt;</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">count</span><span class="token operator">:</span>state<span class="token punctuation">.</span>count
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">//===&gt; 【一旦定义了mapDispatchToProps，props将不再有dispatch使用，将方法直接定义在内部使用】</span>
<span class="token keyword">const</span> <span class="token function-variable function">mapDispatchToProps</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">dispatch<span class="token punctuation">,</span>props</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
 	 <span class="token comment">// 返回一个对象，将对象里面的内容注入到组件的props</span>
 	 <span class="token keyword">return</span> <span class="token punctuation">{</span>
 	 	<span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
 	 		<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">&quot;addCount&quot;</span><span class="token punctuation">,</span><span class="token literal-property property">payload</span><span class="token operator">:</span>val <span class="token punctuation">}</span><span class="token punctuation">)</span>
 	 	<span class="token punctuation">}</span><span class="token punctuation">,</span>
         <span class="token function">reduce</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">&quot;reduceCount&quot;</span><span class="token punctuation">,</span><span class="token literal-property property">payload</span><span class="token operator">:</span>val <span class="token punctuation">}</span><span class="token punctuation">)</span>
         <span class="token punctuation">}</span>
 	 <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span>mapStateToProps<span class="token punctuation">,</span>mapDispatchToProps<span class="token punctuation">)</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div></li></ul> <h1 id="redux-中间件相关资源"><a href="#redux-中间件相关资源" class="header-anchor">#</a> <code>redux</code> 中间件相关资源</h1> <h2 id="_1、redux-thunk"><a href="#_1、redux-thunk" class="header-anchor">#</a> 1、<code>redux-thunk</code></h2> <h3 id="问题"><a href="#问题" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details></details> <h3 id="问题-2"><a href="#问题-2" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details> <h3 id="问题-3"><a href="#问题-3" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details> <h3 id="问题-4"><a href="#问题-4" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details> <h3 id="问题-5"><a href="#问题-5" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details> <h3 id="问题-6"><a href="#问题-6" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details> <h2 id="_2、redux"><a href="#_2、redux" class="header-anchor">#</a> 2、<code>redux</code></h2> <h3 id="问题-7"><a href="#问题-7" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details> <h3 id="问题-8"><a href="#问题-8" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details> <h3 id="问题-9"><a href="#问题-9" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details> <h3 id="问题-10"><a href="#问题-10" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details> <h3 id="问题-11"><a href="#问题-11" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details> <h3 id="问题-12"><a href="#问题-12" class="header-anchor">#</a> 问题</h3> <details class="custom-block details"><summary>点击查看答案</summary></details></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/front-end-dictionary/assets/js/app.88ed2bc2.js" defer></script><script src="/front-end-dictionary/assets/js/2.22fea77d.js" defer></script><script src="/front-end-dictionary/assets/js/8.f5e643c9.js" defer></script>
  </body>
</html>