How to create a new Page?
The page
is like a component
, but we prefer to think that components don't need to know the application state directly, because the change of state should be responsability of the pages.
To create a new page, you need to stay at the root of the project and enter this command in your terminal:
neutron add:page <pageName>
You don't need to inform the technology
because the CLI reads your package.json
to identify the project type. This is awesome, isn't it?
Usage command example
neutron add:page Tools
After the execution, this command will create a new folder in src/pages
with two new files: index.js
and styles.js
.
Example:
/* #FILE: ./src/pages/Tools/index.js */import React, { useState, useEffect } from 'react';import { StyledContainer } from './styles';function Tools() {const [message, setMessage] = useState('');useEffect(() => {setMessage('Tools page!');}, []);return (<StyledContainer><h1>{message}</h1></StyledContainer>);}export default Tools;
/* #FILE: ./src/pages/Tools/styles.js */import styled from 'styled-components';import colors from '@/styles/colors';export const StyledContainer = styled.div``;
Connecting the Page with Store
Consider using the
useSelector
anduseDispatch
hooks. To learn more, check React Redux - Hooks and skip next steps.
To connect the page with store, you should import these references on the index.js
file:
import { connect } from 'react-redux';import { bindActionCreators } from 'redux';import ToolsActions from '@/store/ducks/tools'; // example
The next step is map the state
and dispatchs
to properties of the page and replace export default Tools
, just like this:
const mapStateToProps = state => ({tools: state.tools, // example});const mapDispatchToProps = dispatch =>bindActionCreators(ToolsActions, dispatch); // exampleexport default connect(mapStateToProps,mapDispatchToProps,)(Tools);
Now, you can use all properties mapped in your page:
function Tools({ tools, getToolsRequest }) { // example// ...}