<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          如何優雅地在React項目中使用Redux

          時間:?2017-12-28閱讀:?1501標簽:?redux

          前言

          或許你當前的項目還沒有到應用Redux的程度,但提前了解一下也沒有壞處,本文不會安利大家使用Redux


          概念

          首先我們會用到哪些框架和工具呢?

          React

          UI框架

          Redux

          狀態管理工具,與React沒有任何關系,其他UI框架也可以使用Redux

          react-redux

          React插件,作用:方便在React項目中使用Redux

          react-thunk

          中間件,作用:支持異步action


          目錄結構

          Tips:與Redux無關的目錄已省略

          |--src
              |-- store                 Redux目錄
                  |-- actions.js
                  |-- index.js
                  |-- reducers.js
                  |-- state.js
              |-- components      組件目錄
                  |-- Test.jsx
              |-- App.js               項目入口
              
          


          準備工作

          第1步:提供默認值,既然用Redux來管理數據,那么數據就一定要有默認值,所以我們將state的默認值統一放置在state.js文件

          // state.js
          
          // 聲明默認值
          // 這里我們列舉兩個示例
          // 同步數據:pageTitle
          // 異步數據:infoList(將來用異步接口獲取)
          export default {
              pageTitle: '首頁',
              infoList: []
          }

          第2步:創建reducer,它就是將來真正要用到的數據,我們將其統一放置在reducers.js文件

          // reducers.js
          
          // 工具函數,用于組織多個reducer,并返回reducer集合
          import { combineReducers } from 'redux'
          // 默認值
          import defaultState from './state.js'
          
          // 一個reducer就是一個函數
          function pageTitle (state = defaultState.pageTitle, action) {
            // 不同的action有不同的處理邏輯
            switch (action.type) {
              case 'SET_PAGE_TITLE':
                return action.data
              default:
                return state
            }
          }
          
          function infoList (state = defaultState.infoList, action) {
            switch (action.type) {
              case 'SET_INFO_LIST':
                return action.data
              default:
                return state
            }
          }
          
          // 導出所有reducer
          export default combineReducers({
              pageTitle,
              infoList
          })
          
          

          第3步:創建action,現在我們已經創建了reducer,但是還沒有對應的action來操作它們,所以接下來就來編寫action

          // actions.js
          
          // action也是函數
          export function setPageTitle (data) {
            return (dispatch, getState) => {
              dispatch({ type: 'SET_PAGE_TITLE', data: data })
            }
          }
          
          export function setInfoList (data) {
            return (dispatch, getState) => {
              // 使用fetch實現異步請求
              window.fetch('/api/getInfoList', {
                  method: 'GET',
                  headers: {
                      'Content-Type': 'application/json'
                  }
              }).then(res => {
                  return res.json()
              }).then(data => {
                  let { code, data } = data
                  if (code === 0) {
                      dispatch({ type: 'SET_INFO_LIST', data: data })
                  }
              })
            }
          }

          最后一步:創建store實例

          // index.js
          
          // applyMiddleware: redux通過該函數來使用中間件
          // createStore: 用于創建store實例
          import { applyMiddleware, createStore } from 'redux'
          
          // 中間件,作用:如果不使用該中間件,當我們dispatch一個action時,需要給dispatch函數傳入action對象;但如果我們使用了這個中間件,那么就可以傳入一個函數,這個函數接收兩個參數:dispatch和getState。這個dispatch可以在將來的異步請求完成后使用,對于異步action很有用
          import thunk from 'redux-thunk'
          
          // 引入reducer
          import reducers from './reducers.js'
          
          // 創建store實例
          let store = createStore(
            reducers,
            applyMiddleware(thunk)
          )
          
          export default store

          至此,我們已經完成了所有使用Redux的準備工作,接下來就在React組件中使用Redux


          開始使用

          首先,我們來編寫應用的入口文件APP.js

          
          import React from 'react'
          import ReactDOM from 'react-dom'
          
          // 引入組件
          import TestComponent from './components/Test.jsx'
          
          // Provider是react-redux兩個核心工具之一,作用:將store傳遞到每個項目中的組件中
          // 第二個工具是connect,稍后會作介紹
          import { Provider } from 'react-redux'
          // 引入創建好的store實例
          import store from '@/store/index.js'
          
          // 渲染DOM
          ReactDOM.render (
            (
              <div>
                  {/* 將store作為prop傳入,即可使應用中的所有組件使用store */}
                  <Provider store = {store}>
                    <TestComponent />
                  </Provider>
              </div>
            ),
            document.getElementById('root')
          )

          最后是我們的組件:Test.jsx

          // Test.jsx
          
          import React, { Component } from 'react'
          
          // connect方法的作用:將額外的props傳遞給組件,并返回新的組件,組件在該過程中不會受到影響
          import { connect } from 'react-redux'
          
          // 引入action
          import { setPageTitle, setInfoList } from '../store/actions.js'
          
          class Test extends Component {
            constructor(props) {
              super(props)
            }
          
            componentDidMount () {
              let { setPageTitle, setInfoList } = this.props
              
              // 觸發setPageTitle action
              setPageTitle('新的標題')
              
              // 觸發setInfoList action
              setInfoList()
            }
          
            render () {
              // 從props中解構store
              let { pageTitle, infoList } = this.props
              
              // 使用store
              return (
                <div>
                  <h1>{pageTitle}</h1>
                  {
                      infoList.length > 0 ? (
                          <ul>
                              {
                                  infoList.map((item, index) => {
                                      <li>{item.data}</li>
                                  })
                              }
                          </ul>
                      ):null
                  }
                </div>
              )
            }
          }
          
          // mapStateToProps:將state映射到組件的props中
          const mapStateToProps = (state) => {
            return {
              pageTitle: state.pageTitle,
              infoList: state.infoList
            }
          }
          
          // mapDispatchToProps:將dispatch映射到組件的props中
          const mapDispatchToProps = (dispatch, ownProps) => {
            return {
              setPageTitle (data) {
                  // 如果不懂這里的邏輯可查看前面對redux-thunk的介紹
                  dispatch(setPageTitle(data))
                  // 執行setPageTitle會返回一個函數
                  // 這正是redux-thunk的所用之處:異步action
                  // 上行代碼相當于
                  /*dispatch((dispatch, getState) => {
                      dispatch({ type: 'SET_PAGE_TITLE', data: data })
                  )*/
              },
              setInfoList (data) {
                  dispatch(setInfoList(data))
              }
            }
          }
          
          export default connect(mapStateToProps, mapDispatchToProps)(Test)


          Redux三大原則

          • 單一數據源

          整個應用的 state 被儲存在一棵 object tree 中,并且這個 object tree 只存在于唯一一個 store 中

          • State 是只讀的

          唯一改變 state 的方法就是觸發 action,action 是一個用于描述已發生事件的普通對象

          • 使用純函數來執行修改

          為了描述 action 如何改變 state tree ,你需要編寫 reducers


          結語

          以上就是在React項目中使用Redux的簡單示例,文中代碼可能會有編寫錯誤,歡迎指正,同事希望本文對大家有所幫助


          參考

          原文出處:如何優雅地在React項目中使用Redux

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/289

          React-redux: React.js 和 Redux 架構的結合

          通過Redux 架構理解我們了解到 Redux 架構的 store、action、reducers 這些基本概念和工作流程。我們也知道了 Redux 這種架構模式可以和其他的前端庫組合使用,而 React-redux 正是把 Redux 這種架構模式和 React.js 結合起來的一個庫

          解決頁面刷新redux數據丟失問題

          對于目前普遍的“單頁應用”,其中的好處是,前端可以從容的處理較復雜的數據模型,同時基于數據模型可以進行變換,實現更為良好的交互操作。良好的交互操作背后,其實是基于一個對應到頁面組件狀態的模型,隨便稱其為UI模型。

          redux 和 mobx 調研結果- mobx

          mobx 不同于 redux 的單一數據源的統一管理,它可以有多個 store, 為了便于維護 ,每一個 store 都是一個類,這樣便于維護和擴展;mobx 不同于 redux 的單一數據源的統一管理

          深入學習和理解 Redux

          Redux官網上是這樣描述Redux,Redux is a predictable state container for JavaScript apps.(Redux是JavaScript狀態容器,提供可預測性的狀態管理)。 目前Redux GitHub有5w多star,足以說明 Redux 受歡迎的程度。

          redux之redux-thunk和redux-saga

          redux作為狀態管理倉庫,在我們前端應用中發揮著非常重要的作用,先放一張官方redux flow圖片,使用middleWare背景:我們知道redux中數據流是同步的,不支持異步action更新或獲取數據,但是在實際項目中異步請求數據絕對是高頻出現,并且可以說占據了9成以上的業務場景

          如何使用24行JavaScript代碼實現Redux?

          Redux是迄今為止創建的最重要的JavaScript庫之一,靈感來源于以前的藝術比如Flux和Elm,Redux通過引入一個包含三個簡單要點的可伸縮體系結構,使得JavaScript函數式編程成為可能。如果你是初次接觸Redux

          基于Hooks 的 Redux 速成課

          你對 Redux 感到困惑嗎?如果使用新的 Redux Hooks,會更加簡單!這里是一個關于 Redux 的速成班,將配合 React 函數組件使用:

          redux和react-redux

          redux是react的狀態管理工具,卻不僅僅只是為了react而生的,所以在使用中會存在痛點。而react-redux是專門為了react定制,目的是為了解決redux的痛點,起到了補充的作用。flux無非就是一個常見的event dispatcher

          動手實現一個react-redux

          react-redux 是 redux 官方 React 綁定庫。它幫助我們連接UI層和數據層。本文目的不是介紹 react-redux 的使用,而是要動手實現一個簡易的 react-redux,希望能夠對你有所幫助。

          帶著問題看React-Redux源碼

          我在讀React-Redux源碼的過程中,很自然的要去網上找一些參考文章,但發現這些文章基本都沒有講的很透徹,很多時候就是平鋪直敘把API挨個講一下,而且只講某一行代碼是做什么的,卻沒有結合應用場景和用法解釋清楚為什么這么做。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网