状态机的 Hook（React）

和路由一样，函数组件中使用状态机也可以按照之前类组件的语法：

import { connect } from 'react-redux'
function TodoList(props) {
    const { todos } = props;
    return (
        <></>
    )
}
const mapStateToProps = state => {
    return {
        todos: state.todoList.todos
    }
}
export default connect()(TodoList)

第三方的 Hook

但是，react-redux 插件也给函数组件提供了第三方的 Hook，来实现组件对 redux 的操作：

import { useSelector, useDispatch } from 'react-redux';
export default function TodoList(props) {
    const todos = useSelector((state) => {
        return state.todoList.todos
    })
    const dispatch = useDispatch();
    return (
        <>
            <button onClick={() => dispatch({ type: 'addTodo' })}>新增</button>
            <ul>
                {
                    todos.map(item => <li key={item.id}>{item.value}</li>)
                }
            </ul>
        </>
    )
}

说明：

useSelector()：调用该方法时传递一个函数作为参数，可以获取到仓库中的数据；
useDispatch()：调用该方法可以获取到 dispatch 方法；