Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Architecture Blog Post: Character List Container
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { CharacterList } from '../../components/CharacterList'
import { ActionList } from '../../components/ActionList';
import { characterListLoadingSelector, characterListSelector } from '../../redux/selectors';
import { actions } from '../../redux/actions';
interface CharacterListContainerProps {
createCharacterPath: string
}
export const CharacterListContainer: React.FunctionComponent<CharacterListContainerProps> = ({
createCharacterPath
}) => {
const characters = useSelector(characterListSelector);
const loading = useSelector(characterListLoadingSelector);
const dispatch = useDispatch();
if (!characters) dispatch(actions.fetchCharacters());
if (loading) return <div>loading</div>;
return (
<ActionList actions={[{ to: createCharacterPath, label: 'Create a New Character' }]}>
{characters ?
<CharacterList
characters={characters}
/> :
null
}
</ActionList>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment