Redux与React-看懂你就懂了

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的编写。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值