首页 > 代码库 > [PReact] Integrate Redux with Preact
[PReact] Integrate Redux with Preact
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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。