react+redux+react-redux

一: 基本概念说明:

  1. Store ( 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。)
  2. State ( Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。
    当前时刻的state,可以通过store.getState()拿到。)
  3. Action ( State 的变化,会导致 View 的变化。Action 就是 View 发出的通知,表示 State 应该要发生变化了。)
  4. store.dispatch()是 View 发出 Action 的唯一方法。
  5. Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
    Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。
  6. Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数,这时候就可以触发重新渲染view。
  7. 关于redux的异步操作:
class AsyncApp extends Component {
            componentDidMount() {
            const { dispatch, selectedPost } = this.props
            dispatch(fetchPosts(selectedPost))
        }

        const fetchPosts = postTitle => (dispatch, getState) => {
            dispatch(requestPosts(postTitle));
            return fetch(`/some/API/${postTitle}.json`)
                .then(response => response.json())
                .then(json => dispatch(receivePosts(postTitle, json)));
            };
        };
  1. connect 用于从ui组件生成容器组件。
import { connect } from 'react-redux'

        const VisibleTodoList = connect(
            mapStateToProps, //输入逻辑,即将state映射到ui组件的参数(props),每当state更新的时候,就会自动执行,重新计算ui组件的参数,从而触发ui组件的重新渲染;
            mapDispatchToProps //输出逻辑,用来建立ui组件的参数到store.dispatch方法的映射;
        )(TodoList)

二:工作流程

这里写图片描述

好文推荐:

阮一峰老师的Redux 入门教程(一):基本用法

阮一峰老师的Redux 入门教程(二):中间件与异步操作

阮一峰老师的Redux 入门教程(三):React-Redux 的用法

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值