generator-webpack-redux-react
Generator for a webpack-redux-react project with sub-generators for Components, Containers(Redux linked component), as well as Redux Actions and Reducers.
Getting Started
-
Install yeoman if you don't have it: using
npm install -g yo
-
Install Generator:
npm install -g generator-webpack-redux-react
Creating a project
-
Create a project folder and enter it:
mkdir myProject && cd myProject
-
Initiate the generator:
yo webpack-redux-react
Sub generators
Redux Examples
Generated files based onComponent
To create a react component class named Test run: yo webpack-redux-react:component Car
Creates a folder within /components
that matches the name provided. Below is the result of the command above being run:
/app
--/components
----/Car
------Car.js
------Car.scss
/app/components/Car.js:
;; { superprops; } { return <div className="Car"> </div> ; }
Redux specific
Container
NOTE: Containers are synonymous with Smart Components and Linked-State Components
To create a container named Cars run: yo webpack-redux-react:container Cars
Creates a folder within /containers
that matches the name provided. Below is the result of the command above being run:
/app
--/conatiners
----/Cars
------Cars.js
------Cars.scss
/app/containers/Cars.js:
;;; ;; { superprops; } static propTypes = ; { return <div className="Cars"> </div> ; }//Place state of redux store into props of component { return account: stateaccount router: staterouter ;}//Place action methods into props { return ;}mapStateToProps mapDispatchToPropsCars;
Action
Actions are functions that are called from containers to make something happen to the state (i.e add a car).
To create a set of actions (add, update, remove) for cars run: yo webpack-redux-react:action cars
Creates a folder within /actions
that matches the name provided. Below is the result of the command above being run:
/app
--/actions
----cars.js
/app/actions/cars.js:
const ADD_CARS = 'ADD_CARS';const REMOVE_CARS = 'REMOVE_CARS';const UPDATE_CARS = 'UPDATE_CARS'; { return type: 'ADD_CARS' payload: 'cars' ;} { return type: 'REMOVE_CARS' payload: 'cars' ;} { return type: 'UPDATE_CARS' payload: 'cars' ;}
Reducer
Reducers listen for actions and modify specific pieces of the state accordingly. In this example we are creating a cars reducer that manages state.cars, which is stored as an array.
yo webpack-redux-react:reducer cars
then select array
app/
--/reducers
----cars.js
/app/reducers/cars.js:
;; { }
Other Reading
- ###Redux Docs
- ### Redux Examples