generator-react-webpack-redux
generator-react-webpack-redux copied to clipboard
stylesuxx
What is the recommended way to integrate with redux-simple-router
I created a clean project using the generator.
then, npm install --save react-router redux-simple-router
but couldn't render components using Routes.
I changed run.js to render the routes:
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={SearchComponent}/>
</Route>
</Router>
</Provider>
Modified reducers/index.js to combine the routeReducer:
import { combineReducers } from 'redux';
import { routeReducer } from 'redux-simple-router'
/* Populated by react-webpack-redux:reducer */
const reducers = { routing: routeReducer, search: require('../reducers/search.js') };
module.exports = combineReducers(reducers);
and added Router.RouteHandler to render under Main.js (AppComponent).
but I keep getting these two errors:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of AppComponent.
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of AppComponent.
Thanks in advanced
Ok, apparently Router.RouteHandler was replaced with this.props.children. I also had to move the Routing "DOM" to the container and pass history as a prop to it. I'm not sure if this is the best practice though. @stylesuxx I think it is a good topic for a wiki. I can close this issue and create a Wiki page for Adding routing using redux-simple-router.what do you think?
Hey @yakirn If you could take the time and add a Wiki page that would be great. I will link it from the README then. I was thinking about adding a option to enable routing in the generator and to choose between redux-simple-router and redux-router. Although I am not sure when I will tackle this, but most likely in the next couple of weeks.
I would be very happy to have a wiki for this ! I'm litteraly stuck with the router
Nice ! But how to render a component with a specific route ?
I see that all routes are loading the App container. I guess that all components must be loaded inside the App container ?
No, you can make another container and simply route to that.
Maybe I'll do a short writeup of a Demo application...
I thought that the interest of the App container was to be the main container. How to have a main layout (with nav, header, footer) and route to pages without having to write everything again ? Should I have to write eveything in the index.js (Routes & Layout) ? Sorry for thoses dumb questions but I'm so confused with all that new stuff.
And I feel that having separate containers from App means that I will have to manually populate them when I create actions/reducers while the generator do this for me with App container.
Yeah, well routing highly depends on your application and what you want to accomplish. You can also do routing in your App container if it better fits your purpose.
About the structure: I would put all static things like header and footer to index.html
nav would then be a component I would add to the App container and then do the routing inside it.
I am putting all this into a small demo right now, so stay tuned, should be done in the next couple of hours.
I see that you implementend the container generator ? (I mean that you should update the readme) App and Stats containers are independants ? In this case, there is only one reducer and both ctions are linked to the app container but what if I want to create reducers/actions linked to another containers ? I will have to manually edit the App container after reducer/action generation ? Would it be efficient to specify a container to link actions/reducers to during generation ?
Yes I updated it in the development branch, just did not merge it into master yet. The actions do not really care about in which containers/components they are triggered.
The action is triggered somewhere, either in the container or from within a component. The reducer than takes over the handling of the action and updates the state accordingly.
I use containers in such a way that they handle which Props are passed to the components lying beneath. The components are dumb, they do not care about anything else, than that they get all the props they need - so absolutely no business logic is in containers - they show (parts) of the state and they trigger actions.
What I mean by that is, that I rarely use more than one container, so when I do, it surely has to have mayor differences to the App container, so I am not sure how much sense it makes to generate a new container with all the same functionality as the App container.
(referring to the wiki page) How do you adapt the App container to handle multiple routes? Right now, I am bypassing the App container altogether just so I have control over my routes (making my own containers). It looks like you were discussing this in https://github.com/stylesuxx/generator-react-webpack-redux/issues/24 but not quite in the context of routing?
I suggest using the way described in the Wiki. Your outer most container is responsible for routing and provides all the routes. The route component itself is just a component distributing the props to the real components beneath it.
Not sure if I understand your question regarding multiple routes. In the example in the Wiki I handle three routes:
- /
- /foo
- /bar
or do you mean nested routes like /foo/bar/:someId ? I guess I should really work on a routing example.
/foo and /bar are both using the App component, which I suspect is just a
placeholder to be replaced by some other view components. However, the
App component acts as a container for pretty much the entire application
state because of the way the generator is set up (it auto-adds
actions/reducers). Thus, to use the router you need to pretty much ignore a
pretty important utility.
If you check my linked issue, you'll notice that @stylesuxx mentions
adapting the App component for routing multiple sub routes so one can
avoid playing a massive game of copy-paste. I'd like to know how to do that.
On Jun 20, 2016 08:29, "Chris" [email protected] wrote:
I suggest using the way described in the Wiki. Your outer most container is responsible for routing and provides all the routes. The route component itself is just a component distributing the props to the real components beneath it.
Not sure if I understand your question regarding multiple routes. In the example in the Wiki https://github.com/stylesuxx/generator-react-webpack-redux/wiki/Routing I handle three routes:
- /
- /foo
- /bar
or do you mean nested routes like /foo/bar/:someId ? I guess I should really work on a routing example.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/stylesuxx/generator-react-webpack-redux/issues/1#issuecomment-227128503, or mute the thread https://github.com/notifications/unsubscribe/ACiZGuZ0gv_5wQ8yZZOxh72ky_CdDchZks5qNoefgaJpZM4G71i4 .
Yes, that was me replying ;-)
I will try to set up an example in the next couple of days to illustrate this.
This is just a short log of my experimentation with react-router, skip to the bottom for source link.
Abstract:
In this example the user will be shown a link to the login page if not logged in yet. After the user is logged in, a link to the member area will be displayed. The user will be greeted on the member page after logging in.
Used routes:
- / Will provide a login button if not logged in, otherwise a link to the member page
- /self Will display a welcome message if logged in
Base Setup
mkdir routing
cd routing
yo react-webpack-redux (default settings)
Actions
This example will only need one action to switch the logged in state of the user.
yo react-webpack-redux:action login
Reducers
Only a single state needs to be tracked and this is the users logged in state:
yo react-webpack-redux:reducer user
Simply add a boolen flag to the reducer to keep track of the login state. Also set up the action so that the login state is set to true if a login action happens.
Components
We will use the following components:
-
login provides a login button
-
link displays the link to the member area
-
index displays login button or link to member page
-
welcome displays a welcome message
yo react-webpack-redux:component Login yo react-webpack-redux:component Link yo react-webpack-redux:component Index yo react-webpack-redux:component Welcome
Containers
For our routes we will need wrapper containers to connect to the stores and set up actions:
-
indexRoute wrapper for the index route
-
selfRoute wrapper for the self route
yo react-webpack-redux:container IndexRoute yo react-webpack-redux:container SelfRoute
Routes
Install react-router
npm install --save react-router
Routes are set up in Main.js
So you basically need a container for every route which you need to connect to the store and set up your actions and props for this route. As far as I can see you will not get around copy and pasting all the actions and props you need for your routes, aka connecting the container to the store.
I was under the impression one could pass props to the routes directly, this does not seem to be the case, I must have confused it with the URL params.
Please let me know if this makes sense to you, or if you can think of a better way. I will experiment with other routers and will add this findings to the Wiki. Maybe I adapt the example and merge it to master for future reference.
You can find the whole source here => https://github.com/stylesuxx/generator-react-webpack-redux/tree/feature/routing-example/examples/routing
@stylesuxx Wow, thanks! I'm a bit relieved that's the only option I have, as I've already scaffolded my entire project like so.
I would not say it is the only way (especially in the JS universe ;-), there are multiple routing solutions:
- react-router-redux (like react router but also allows for redux' time travel feature)
- universal-router
- react-router-component
- react-mini-router (not sure if still maintained)
I have not evaluated all of them, universal-router looks very promising, since it seems to allow to simply pass props down to route components. On the other hand, react-router-redux might be the way to go in order to keep time travel functionality.
I would really like to see a generator for routes. I just do not want to rush it, first evaluate which solution would be the best fit.
If you have any input on one of the mentioned libraries, feel free to share your experience.