React-Redux

Posted 2023-04-06

参考技术A React 实际上只是 UI 框架，通过 JSX 生成动态 dom 渲染 UI，没有架构、没有模板、没有设计模式、没有路由、也没有数据管理。所以需要借助其他工具。

npm install redux --save

npm install react-redux --save

React-Redux 是 Redux 的官方 React 绑定库。它能够使你的 React 组件从 Redux store 中读取数据，并且向 store 分发 actions 以更新数据

上面 VisibleTodoList 便是 UI 组件 TodoList 通过 connect 方法自动生成的容器组件。

connect 方法接受两个参数： mapStateToProps 和 mapDispatchToProps 。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将 state 映射到 UI 组件的参数 props ，后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action 。

mapStateToProps 是一个函数，它接受 state 作为参数，返回一个对象。这个对象有一个 todos 属性，代表 UI 组件的同名参数，后面的 getVisibleTodos 也是一个函数，可以从 state 算出 todos 的值。
mapStateToProps 建立一个从（外部的） state 对象到（ UI 组件的） props 对象的映射关系。执行后应该返回一个对象，里面的每一个键值对就是一个映射。

React-Redux - 钩子 API

【中文标题】React-Redux - 钩子 API

【英文标题】：React-Redux - Hooks API

【发布时间】：2020-07-11 21:57:24

【问题描述】：

我正在尝试配置我的新 react-redux 应用程序以使用 React-Redux 的新功能。 official documentation 说

React Redux 现在提供一组钩子 API 作为现有 connect() 高阶组件的替代方案。

我一直在尝试找到一些与 Hooks API 相关的帮助文章，其中包含一些真实示例，但所有 react-redux 应用程序都使用连接功能。官方文档还显示了非常基本的示例。

我想使用 useSelector（由 Hooks API 提供）更改我的应用程序中的连接功能。

这是我的应用程序中的示例代码 sn-p。

//MessagesListContainer
export default connect(
  // mapStateToProps
  (state:State) => (
    activeUser: getActiveUser(state),   
    messages: getMessagesList(state),   
  )
)(MessagesList)

//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
  Object.keys(state.messages).map((key : any)=> state.messages[key])
)

export interface IMessagesListProps 
  activeUser?: User;
  messages?: Message[];

/**
 *  Messages List
 */
export default class MessagesList extends PureComponent<IMessagesListProps> 
.
.
.

【参考方案1】：

Hooks API 方便了函数组件，所以我将我的类组件嵌套在一个函数组件中，如下所示：

//messages-list.container.tsx
//MessagesListContainer
export const MessagesListContainer = () => 
   const activeUser= useSelector((state:State) => getActiveUser(state));
   const messages= useSelector((state:State) => getMessagesList(state));
   return <MessagesList activeUser=activeUser messages=messages />



//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
  Object.keys(state.messages).map((key : any)=> state.messages[key])
)

//end of messages-list.container.tsx

//messages-list.component.tsx
export interface IMessagesListProps 
  activeUser?: User;
  messages?: Message[];

/**
 *  Messages List
 */
export default class MessagesList extends PureComponent<IMessagesListProps> 
.
.
.

根据我的看法，最好将最后一级组件与商店隔离。

【参考方案2】：

钩子与类组件不兼容。 要使用 Hook，您需要将类组件转换为函数组件。 例如，您的代码可以重构为

/**
 *  Messages List
 */

const getActiveUser = (state: State) => state.activeUser;
const getMessagesList = (state : State) => (Object.keys(state.messages).map((key : any)=> state.messages[key]));

const MessagesList: React.FC = () => 
  const activeUser = useSelector(getActiveUser);
  const messagesList = useSelector(getMessagesList);

  ....


export default MessagesList;