React 学习笔记之 Redux-saga

首先,这个redux-sagaredux-thunk 做的是同样的事情, 就是解决我们在redux中做异步的事情. 但 redux-saga 所涉及到的知识点和代码的复杂程度上都要复杂一些.

redux-saga 是基于ES6 的 Generator来实现的异步请求数据.

这是一个Generator例如:

    function* g() {
        var res = yield 1 + 2
        return res
    }

以上就是一个用同步方式来实现异步请求的Generator 函数. 更多的需要参考其文档. 这里就吧赘述了,因为我们的目的是记录学习 Redux-sagareact中的应用.

继续阅读React 学习笔记之 Redux-saga

React – Redux 学习之Redux-thunk & applyMiddleware

在之前的练习中,我们一直在使用同步的方式进行状态管理, 那么在Redux中,我么如何使用异步的方式进行状态更新呢?
这里需要用到Redux的中间件applyMiddelwareredux-thunk:

首先,我们应该在创建Store的时候注入中间件

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const store = createStore(
    reducers,
    // 注入中间件
    applyMiddleware(thunk)
)

继续阅读React – Redux 学习之Redux-thunk & applyMiddleware

React – Redux 学习之表现组件和容器组件

我们一般会用到 表现组件容器组件.

表现组件

我们一般认为表现组件的目的仅仅是通过获得的Props 来渲染页面.例如我在学习制作一个TodoList时.
Redux在这里维护一个List数组,而我需要通过action来获取该List.
因此我们会有表现组件TodoList, 如下:

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import Todo from './Todo'

class TodoList extends Component {
    render () {
        //
        const todos = this.props.todos
        const { toggleTodo, removeTodo } = this.props.actions
        //
        return (
            
    { todos.map( todo => { return toggleTodo(todo.id)} remove={() => removeTodo(todo.id)} /> }) }
) } } TodoList.propTypes = { todos: PropTypes.array, actions: PropTypes.object } export default TodoList

继续阅读React – Redux 学习之表现组件和容器组件