Day 28 测试 React 元件:测试 Redux

先看一下使用 redux 的元件小范例:

import {createStore} from 'redux'
import {reducer} from './redux-reducer'

const store = createStore(reducer)

export {store}
const initialState = {count: 0}
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1,
      }
    case 'DECREMENT':
      return {
        count: state.count - 1,
      }
    default:
      return state
  }
}

export {reducer}
import React from 'react'
import {useSelector, useDispatch} from 'react-redux'

function Counter() {
  const count = useSelector(state => state.count)
  const dispatch = useDispatch()
  const increment = () => dispatch({type: 'INCREMENT'})
  const decrement = () => dispatch({type: 'DECREMENT'})
  return (
    <div>
      <h2>Counter</h2>
      <div>
        <button onClick={decrement}>-</button>
        <span aria-label="count">{count}</span>
        <button onClick={increment}>+</button>
      </div>
    </div>
  )
}

export {Counter}

P.S. 呜呜,先发文再补完


<<:  [Day 28] 社会对人工智慧的期待与影响 Society Concern and Impact

>>:  Day28 | 获取安装的extension进行操作

Day 27 上传自己的 Image 到 Dockerhub

藉着 Day 14 建一个 Node.js 容器 所建立的基底,来制作一个 Image 并上传到 D...

DAY27 - 建议避免的CSS命名规则

昨天,提供了一种CSS命名的方法, 今天,我们再来看看有什麽要避免的CSS命名呢? 避免直接把颜色放...

Day23 Portal

Portal为不产生parent节点的情形下,将children渲染到DOM节点上面的方法。起手的宣...

[Day13] 文本/词表示方式(四)-共现矩阵与降维

ㄧ. 前言 前面有说明如何运用TFIDF与BOW来表示一个句子/文本的表示方式,但若以BOW这样的方...

Day6|【Git】提交档案给 Git 控管 - git status 、 git add 指令

接下来让我们开始熟悉 Git 的操作流程。 使用 Git 的时候,我们会常看见以下四个指令: git...