基於react-hooks的替代redux解決方案

背景

react hooks 已經發布好久了,相關文檔已經有了大量的資源.
本文提供一個基於react-hooks的redux 替代解決方案.
PS: 沒有最好的解決方案,只有最適合的解決方案.本文不完善的地方請在評論指出
項目地址 https://github.com/Tangpriest/hooks_demo
複製代碼

關鍵字

create-react-app react-hooks
複製代碼

初始化項目

初始化項目用的是create-react-app腳手架
爲何不用webpack本身構建? 由於懶 ......
實際上是由於這不是本文講解的重點
複製代碼

運行如下語句其中之一初始化項目
複製代碼

用npx的話 (也是官方推薦的作法)
npx create-react-app demo
用npm
npm init react-app my-app
用yarn
yarn create react-app my-app
複製代碼

而後你大概獲得瞭如下的項目結構
複製代碼

demo
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
複製代碼

稍微修改下項目目錄,把src下面全部文件都刪掉了,只留下index.js ,編輯index.js
複製代碼

import React from 'react'
import ReactDOM from 'react-dom'

const App = function (){
  const [title,setTitle] = React.useState('react-redux')
  return (
    <div onClick={()=>{setTitle('react-hooks')}}>{title}</div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
複製代碼

命令行 npm start 或者 yarn start 至此~咱們的項目初始化結束
複製代碼

引入hooks

在src下面新建文件 store.js
首先用react提供的createContext 建立一個Context
export const GlobalContext = React.createContext({})

而後構造一個最外層的GlobalProvider組件用來包裹子組件
用useState函數定義了store裏面的appName字段以及修改該字段的方法,
並在value裏面傳遞給後面的子組件

完整的store.js在下面 其實這一步就對應了redux中的createStore和reducer
複製代碼

import React from 'react'

export const GlobalContext = React.createContext({})

export function GlobalProvider(props) {
  const [appName, setAppName] = React.useState('react-redux')
  return (
    <GlobalContext.Provider
      value={{
        appName,
        setAppName
      }}
    >
      {props.children}
    </GlobalContext.Provider>
  )
}

複製代碼

修改index.js 用store.js裏面提供的<GlobalProvider>組件包裹<App>組件
至此 改造已經完成
!!!驚不驚喜 意不意外 沒有react-redux 的connect 函數 沒有action 沒有dispatch
沒有reducer ~~~
複製代碼

import React from 'react'
import ReactDOM from 'react-dom'
import { GlobalProvider, GlobalContext } from './store'

const App = function (){
  const [title,setTitle] = React.useState('react-redux')
  return (
    <div onClick={()=>{setTitle('react-hooks')}}>{title}</div>
  )
}

ReactDOM.render(
  <GlobalProvider>
    <App />
  </GlobalProvider>
  , document.getElementById('root'))

複製代碼

實驗

在src 下面新建components文件夾 新建兩個文件做爲驗證

├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── components ├──button.js
    |              ├──show.js
    |
    ├── index.js
    ├── store.js
    

複製代碼

button.js 調用store.setAppName方法
複製代碼

import React from 'react'
import { GlobalContext } from '../store'

export default function ButtonComponent() {
  const store = React.useContext(GlobalContext)
  return (
    <div>
      這個是button組件,點擊按鈕將react-redux 變成react-hooks
      <button onClick={()=>{store.setAppName('react-hooks')}}>切換</button>
    </div>
  )
}
複製代碼

show.js 用來顯示appName
複製代碼

import React from 'react'
import { GlobalContext } from '../store'

export default function ShowComponent() {
  const store = React.useContext(GlobalContext)
  return (
    <div>
      <h1>{store.appName}</h1>
    </div>
  )
}
複製代碼

再將這兩個組件整合到index.js中去
複製代碼

import React from 'react'
import ReactDOM from 'react-dom'
import { GlobalProvider, GlobalContext } from './store'


import ButtonComponent from './components/button'
import ShowComponent from './components/show'

const App = function (){
  const [title,setTitle] = React.useState('react-redux')
  return (
    <div onClick={()=>{setTitle('react-hooks')}}>
      <ButtonComponent />
      <ShowComponent />
    </div>
  )
}

ReactDOM.render(
  <GlobalProvider>
    <App />
  </GlobalProvider>
  , document.getElementById('root'))


複製代碼

npm start 看到效果
至此 構建工做結束
複製代碼

感言: hooks 處理數據較redux 更清晰,不須要繞來繞去
若是更偏心redux的處理方式 react 也提供了reducer 

該項目地址 https://github.com/Tangpriest/hooks_demo
複製代碼