Redux is one of the most popular state-management libraries and although not specific to React, it is widely used with it. This is why the author of Preact has released a package called preact-redux, which is a simple wrapper around the main react-redux package that enables it to be used in a Preact application without any other changes to your codebase. In this lesson we refactor a stateful component to use Redux + Redux-thunk. https://github.com/developit/preact-redux

Install:

yarn add redux redux-thunk preact-redux

Set up:

import {h, render} from 'preact';
import {Provider} from 'preact-redux';
import thunk from 'redux-thunk';
import {createStore, applyMiddleware, compose} from 'redux';
import App from './components/App';
import reducer from './reducer'; const initialState = {
loading: true,
user: null
}; const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
}) : compose; const store = createStore(reducer, initialState, composeEnhancers(applyMiddleware(thunk))); render(
<div>
<Provider store={store}>
<App />
</Provider>
</div>,
document.querySelector('main'));

Reducer:

export default function (state, action) {
switch (action.type) {
case 'FETCH_USER':
return {
user: null,
loading: true
};
case 'USER_FETCHED':
return {
user: action.payload,
loading: false
}; default:
return state;
}
}

Action creator:

const config = {
url: 'https://api.github.com/users'
}; export function fetchUser(username) {
return function (dispatch) {
dispatch({type: 'FETCH_USER'});
fetch(`${config.url}/${username}`)
.then(resp => resp.json())
.then(user => {
dispatch({type: 'USER_FETCHED', payload: user})
})
.catch(err => console.error(err));
}
}

Component:

import {h, Component} from 'preact';
import User from './User';
import {fetchUser} from '../actions';
import {connect} from 'preact-redux'; export class Profile extends Component { componentDidMount() {
const username = this.props.match.params.user;
this.props.fetchUser(username);
} render({loading, userState, user}) {
return (
<div class="app">
{(loading && !userState)
? <p>Fetching {user}'s profile</p>
: <User name={userState.name} image={userState.avatar_url}></User>
}
</div>
);
}
} const mapStateToProps = (state) => {
return {
userState: state.user,
loading: state.loading
};
};
const mapDispatchToProps = (dispatch) => {
return {
fetchUser: (username) => dispatch(fetchUser(username))
};
}; export default connect(
mapStateToProps,
mapDispatchToProps
)(Profile);

[PReact] Integrate Redux with Preact的更多相关文章

  1. [Preact] Integrate react-router with Preact

    React-router is the community favourite routing solution - it can handle all of your complex routing ...

  2. [AngularJS NG-redux] Integrate Redux Devtools

    In this lesson, we are going to learn how to integrate Redux Devtools into our Angular application. ...

  3. Preact(React)核心原理详解

    原创: 宝丁 玄说前端 本文作者:字节跳动 - 宝丁 一.Preact 是什么 二.Preact 和 React 的区别有哪些? 三.Preact 是怎么工作的 四.结合实际组件了解整体渲染流程 五. ...

  4. Taro 3.4 beta 发布: 支持 Preact 为应用开辟更多体积空间

    项目体积是困扰小程序开发者的一大问题,如果开发者使用 Taro React 进行开发,更是不得不引入接近 100K 的 React 相关依赖,这让项目体积变得更加捉襟见肘.因此,Taro v3.4 的 ...

  5. Using Immutable in React + React-Redux

    React-Redux Introduction React-Redux is a library for React based on Redux package. And the core ide ...

  6. React与Preact差异之 -- setState

    Preact是React的轻量级实现,是React比较好的替代者之一,有着体积小的优点,当然与React之间一定会存在实现上的差异,本文介绍了在 setState 方面的差异之处. 源码分析 首先来分 ...

  7. [PReact] Handle Simple Routing with preact-router

    Some applications only need a very minimal routing solution. This lesson will cover a practical exam ...

  8. [PReact] Reduce the Size of a React App in Two Lines with preact-compat

    Not every app is greenfield, and it would be a shame if existing React apps could not benefit from t ...

  9. [PReact] Use Link State to Automatically Handle State Changes

    Storing and updating values inside a component’s local state (known as controlled components) is suc ...

随机推荐

  1. Spring 配置自动扫描原理说明

    Spring利用IOC容器将所有的bean进行有秩序的管理维护,而实际项目中不可能在xml文件中创建bean,而是利用了Spring的组件自动扫描机制,通过在classpath自动扫描的方式把组件纳入 ...

  2. 一分钟搞清MyEclipse与Eclipse的关系

    经常在各种论坛会出现一些讨论MyEclipse与Eclipse的,比如两者的使用情况,区别,哪个好,诸如此类的问题,因此在查询资料后感觉有些新的收获这里做些总结. 产地不同 Eclipse 是一个ID ...

  3. sqlserver 小计合计总计

    SELECT CASE WHEN GROUPING(F1) = 1 THEN '总计'WHEN GROUPING(F1) = 0 AND GROUPING(F2) = 1 THEN  F1+'合计'W ...

  4. Postman APP

    http://chromecj.com/web-development/2017-12/870.html    Postman 工具模拟http各种协议请求.

  5. Ueditor 七牛集成

    UEDITOR修改成功的 http://blog.csdn.net/uikoo9/article/details/41844747 http://blog.csdn.net/u010717403/ar ...

  6. 洛谷——P3384 【模板】树链剖分

    https://www.luogu.org/problem/show?pid=3384#sub 题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作 ...

  7. 洛谷 P2108 学英语

    P2108 学英语 题目描述 为了适应紧张的大学学习生活,小Z发愤图强开始复习巩固英语. 由于小Z对数学比较有好感,他首先复习了数词.小Z花了一整天的时间,终于把关于基数词的知识都搞懂了.于是小Z非常 ...

  8. LeetCode 06 ZigZag Conversion

    https://leetcode.com/problems/zigzag-conversion/ 水题纯考细心 题目:依照Z字形来把一个字符串写成矩阵,然后逐行输出矩阵. O(n)能够处理掉 记i为行 ...

  9. java初始化过程中成员变量

    package day01; class Base{ int j; //1.j=0 Base(){ add(1); //2.调用子类add()方法 System.out.println(j); //4 ...

  10. 洛谷P3374 【模板】树状数组 1(CDQ分治)

    题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某一个数加上x 2.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表示该数列数字的个数和操作的总个数. ...