redux 学习之旅，初步尝试

必备知识

常用react术语

JSX
JSX，是一个 JavaScript 的语法扩展
Babel 会把 JSX 转译成一个名为React.createElement() 函数调用。

State
组件中的 state 包含了随时可能发生变化的数据。state 由用户自定义，它是一个普通 JavaScript 对象。
永远不要直接改变 this.state，因为后续调用的 setState() 可能会替换掉你的改变。请把 this.state 看作是不可变的。

Function Components
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

Props
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改

Hooks
Hook 是向下兼容的。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。
例如：State Hook 。import { useState } from 'react;
Effect Hook useEffect.给函数组件增加了操作副作用的能力(在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”。)

redux

function Counter() {
  // State: a counter value
  const [counter, setCounter] = useState(0)

  // Action: 当事件发生后，触发状态更新的代码
  const increment = () => {
    setCounter(prevCounter => prevCounter + 1)
  }

  // View: UI 定义
  return (
    <div>
      Value: {counter} <button onClick={increment}>Increment</button>
    </div>
  )
}

这段代码里，
state：驱动应用的真实数据源头
view：基于当前状态的 UI 声明性描述
actions：根据用户输入在应用程序中发生的事件，并触发状态更新

redux常用术语
Action：一个具有 type 字段的普通 JavaScript 对象。你可以将 action 视为描述应用程序中发生了什么的事件。type 字段是一个字符串，给这个 action 一个描述性的名字，比如"todos/todoAdded"。我们通常把那个类型的字符串写成“域/事件名称”，其中第一部分是这个 action 所属的特征或类别，第二部分是发生的具体事情。

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

Action Creator：一个创建并返回一个 action 对象的函数。它的作用是让你不必每次都手动编写 action 对象

const addTodo = text => {
	return {
		type: 'todos/todoAdded',
		payload: text
	}
}

Reducer
reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。函数签名是：(state, action) => newState。 你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。

const initialState = { value: 0 }

function counterReducer(state = initialSate, action) {
	// 检查reducer是否关心这个action
	if (action.type === 'counter/increment') {
		// 如果是你，复制'state'
		return {
			...state,
			//使用新值更新state副本
			value： state.value + 1
		}
	}
	//返回原来的state不变
	return state
}

Store：当前Redux应用的状态存在于一个名为store的对象中。store是通过传入一个reducer来创建的，并且有一个名为getStatede 方法，返回当前状态值

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: counterReducer })

console.log(store.getState())
// {value: 0}

Dispatch: 更新state的唯一方法是调用store.dispatch()并传入一个action对象。store将执行所有reducer函数并计算出更新后的state，调用getState()可以获取新state。可以理解为触发一个事件

const increment = () => {
	return {
		type: 'counter/increment'
	}
}

store.dispatch(increment())

console.log(store.getState())

Selector: Selector函数可以从store状态树中提取指定的片段。

const selectCounterValue = state => state.value

const currentValue = selectCounterValue(store.getSate())