[PReact] Integrate Redux with Preact

Posted 2020-09-23 Answer1215

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);