Redux与React-看懂你就懂了

最新推荐文章于 2025-06-19 20:35:48 发布

原创最新推荐文章于 2025-06-19 20:35:48 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Redux

Redux 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了React组件间通信的挑战，特别是在深层嵌套组件结构中。Redux作为一种解决方案被介绍，它通过集中管理应用状态来简化组件间的通信。文章还概述了Redux的基本概念和与React结合使用的工作流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React是View层，把页面划分为一个个组件，但是组件之间的通信，数据传递，需要通过props传递，单纯的父子之间，这样做是可以的，但是随着页面的丰富，组件嵌套的深度，组件之间传递信息就显得略微麻烦，你能想象层层传递的状态么。。。。
大概就是下图所示的
这里写图片描述
Redux正好解决了这个问题，Redux把页面状态存在store中，任何一个组件都可以直接从store中获取数据，相当于本来是中央集权，通过层级传递，但是现在扁平化结构组织，直接从中心调取数据。

Redux-react：
重要的几个概念：

        <Provider>
        connect
        store
        dispatch
        reducer
        容器组件
        显示组件

一般如果使用Redux-react的话，一般的工作思路是这样的：
1、编写显示组件
2、编写Reducer
3、编写容器组件
形成的代码结构大体如下：

//入口文件
const store = createStore(reducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

//app文件入口
const App = () => (
  <div>
    <AddTodo />    <!--容器组件>
    <VisibleTodoList />
    <Footer />
  </div>
)

export default App

//容器组件中需要做两件事情
//1、加载显示组件
//2、向显示组件传递参数和回调函数，使用connect

这样，你就基本完成了基本的Redux-react的编写。