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`
  background-color: ${colors.background};
  color: ${colors.primary};
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
`;

Connecting the Page with Store

Consider using the useSelector and useDispatch 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); // example
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Tools);

Now, you can use all properties mapped in your page:

function Tools({ tools, getToolsRequest }) { // example
  // ...
}