redux-standalone-component
It's a simple example of how we can create a standalone React component in combination with Redux. As far as Redux is used as a single global store in React app, we have to adjust all our components with its actions and reducers to the current app configuration. But what if we want to use the same components in different React apps with different Redux stores?
Here we create some component boilerplate, that can be used in a different apps.
The basic idea is to pass the mapStateToProps
function as a props to our component from the parent component
{ return // data, x, y, ... or any other properties and its format are predefined by the component // so that the component can use it like for example // const { data, x, y } = this.props // data.map(d => x(d) + y(d)) data: statedemoComponentData dprop1 dprop2 }...<DemoComponent mapStateToProps=thisdemoComponentMapStateToProps/>
And also combine reducers by data key
const reducers =
Inside a standalone demo component we define mapStateToProps
function as
{ return props}
Install
npm install redux-standalone-component
Usage
Simple example of usage
const initialState = demoComponentData: prop1: 1 prop2: 2 prop1: 3 prop2: 4 prop1: 5 prop2: 6 prop1: 7 prop2: 8 const reducers = const store =
Class App
{ superprops } { return data: statedemoComponentData dprop1 dprop2 } { return <DemoComponent mapStateToProps=thisdemoComponentMapStateToProps/> } App
Example
Locally,
- Clone the repo
- $cd examples
- $npm install
- $npm start
- go to
localhost:3000
You should see a simple list of sums: prop1
+prop2
License
MIT