redux中的hooks使用详解

import { useSelector } from 'react-redux'
import { memo } from 'react'

const App = memo(() => {
	` 使用 useSelector 将 Redux Store 中的数据映射到组件内 `
	` state 参数：代表整个 Redux Store 的根状态（root state） `
	const { count } = useSelector((state) => {
		return {
			`假设你的 Redux Store 中有一个名为 counter 的 slice（分片），该 slice 的状态中包含 count 字段`
			count: state.counter.count
		}
	})

	return (
		<div>
			<h2>count: {count}</h2>
		</div>
	)
})

// state发生变化时，父组件的useSelector判断本次映射的count与上次映射的count是否一致，不一致则重新渲染，否则不重新渲染
const { count } = useSelector((state) => {
	return {
		count: state.counter.count
	}
}, shallowEqual)

// state发生变化时，子组件的useSelector判断本次映射的msg与上次映射的msg是否一致，不一致则重新渲染，否则不重新渲染
const { msg } = useSelector((state) => {
	return {
		msg: state.counter.msg
	}
}, shallowEqual)

import { createSelector } from 'reselect'

`输入选择器：从状态中提取原始数据`
const selectUser = (state) => state.user       【state.user 是 Redux Store 中的一个 slice】
const selectPosts = (state) => state.posts     【state.posts 是 Redux Store 中的一个 slice】

`Reselect 的 createSelector 会按顺序将 输入选择器的返回值，作为参数传递给转换函数。
 因此，转换函数中的
   user  对应 selectUser的返回值（即state.user）
   posts 对应 selectPosts的返回值（即state.posts）`
const selectUserData = createSelector(
	[selectUser, selectPosts],    `【输入选择器数组】`
	(user, posts) => ({           `【转换函数】`
		username: user.name,
		postCount: posts.length,
	})
)

import { useSelector } from 'react-redux'
import { selectUserData } from './selectors'

const Component = () => {
	const { username, postCount } = useSelector(selectUserData)
	
	return (
		<div>
			<h3>{username}</h3>
			<p>Posts: {postCount}</p>
		</div>
	)
}

const { username, postCount } = useSelector(
	selectUserData,
	shallowEqual
)

const selectUser = (state) => state.user
const selectPosts = (state) => state.posts

const selectUserData = createSelector(
	[selectUser, selectPosts],
	(user, posts) => ({
		username: user.name,
		postCount: posts.length,
	})
)

const selectUserStats = createSelector(
	[selectUserData],
	(userData) => ({
		avgPostsPerDay: userData.postCount / 30,
	})
)

const selectPostById = (postId) => createSelector(
	[(state) => state.posts],
	(posts) => posts.find(post => post.id === postId)
)

// 组件中使用
const Component = ({ postId }) => {
	const post = useSelector(() => selectPostById(postId))
	return <div>{post.title}</div>
}

const selectorA = createSelector(
  [selectX, selectY],
  (x, y) => x + y
);

const selectorB = createSelector(
  [selectY, selectX],
  (y, x) => y + x
);

const selectDeepData = createSelector(
  [(state) => state.deep.nested.data],
  (data) => data.value
);

` 派发操作 `
const dispatch = useDispatch()

function calNumber (num) {
	dispatch(addNumberAction(num))
}

return (
	<div>
		<h2>count:{count}</h2>
		<button onClick={e => calNumber(1)}> +1 </button>
	</div>
)