Thay thế Redux với React Hooks

Ngoài những hook cơ bản như là useState , useEffect thì Hook còn cung cấp cho chúng ta 3 hook có thể kết hợp với nhau để có chức năng giống như là Redux :

useContext

Với những ai đã từng làm việc với React.Context thì nó cho phép chúng ta truyền state đến component cao nhất trong component tree rồi từ đó ta có thể chia sẻ state đó đến những component khác trong cùng component tree.
Tuy nhiên nếu phải sử dụng nhiều context thì sẽ là 1 vấn đề lớn và do đó useContext ra đời để giúp chúng ta giảm bớt vấn đề này.
Đầu tiên chúng ta định nghĩ 1 context

const AppContext = React.createContext({});

Sau đó bao bọc toàn bộ phần DOM bằng thẻ Provider và truyển giá trị mà bạn muốn chia sẻ đến các component khác:

<AppContext.Provider value={{ username: 'superawesome' }}>
  <div className="App">                      
    <Navbar />
    <Messages />
  </div>
</AppContext.Provider>

Như vậy trong componet Navbar hoặc Messages
chúng ta có thể dụng được username như sau:

const Navbar = () => {
  const { username } = useContext(AppContext)

  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  )
}

useReducer

Một cái term khá quen thuộc nếu dùng Redux vì vậy nhiệm vụ của nó giống với Reducer trong Redux là để tạo ra state mới cho component.
Đầu tiên cần định nghĩ một function là myReducer

const myReducer = (state, action) => {
  switch(action.type) {
    case('countUp'):
      return {
        ...state,
        count: state.count + 1
      }
    default:
      return state
  }
}

chúng ta sẽ sử dụng useReducer với tham số là myReducer và 1 initial state.

const [state, dispatch] = useReducer(myReducer, { count: 0 })

Và cuối cùng, chúng ta có thể sử dụng state đó để hiển thị các giá trị khác, đồng thời chúng ta cũng có thể sử dụng dispatch để thay đổi giá trị của state:

<div className="App">
  <button onClick={() => dispatch({ type: 'countUp' })}>
    +1
  </button>
  <p>Count: {state.count}</p>
</div>

Dispatch action

Hàm useDispatch() hoàn toàn giống với hàm dispatch ở trong Redux store. Thêm nó như sau

import { useSelector, useDispatch } from 'react-redux'
const dispatch = useDispatch()
// Note action
const addNote = note => dispatch(addnote(note))
const deleteNote = id => dispatch(deletenote(id))

Thêm các action này vào UI để trigger.

Kết thúc

Các bạn nên sử dụng cách này với Redux sẽ giảm được khá nhiều thời gian code đó . Cảm ơn các bạn đã đón đọc.

3 Likes

Anh cũng chưa dùng thằng này để thay redux, cảm giác redux vẫn xâm chiếm trái đất dài dài :joy:
mới có thằng recoil nữa đó, chính chủ fb tạo ra.