Soya Next
Search…
⌃K
Links

TodoMVC

Usage

Clone this repository:
git clone https://github.com/traveloka/soya-next.git
cd soya-next/examples/todomvc
Install and run it:
npm install
npm start
Open http://localhost:3000 in your browser.

How It Works

This example is exactly the same as Redux TodoMVC. The only difference is that you need not to worry about unregistered reducers anymore and they're automatically code-splitted.
To make it works, wrap every page with createPage() as follows:
import { createPage } from 'soya-next';
const reducers = {
uniqueName(state, action) {
return state;
},
};
const Page = () => {};
Page.getIntialProps = ({ store }) => {
// you can dispatch any actions here
// store.dispatch(actionCreator());
// or get current store state
// store.getState()
};
export default createPage(mapStateToProps, mapDispatchToProps)(Page, reducers);
To use it in your component, you can do the following:
import { compose } from 'redux';
import { applyReducers } from 'soya-next/redux';
import { connect } from 'react-redux';
export default compose(
applyReducers(reducers), // apply reducer first
connect(mapStateToProps, mapDispatchToProps) // then connect to it
)(Component);
Note: ensure each reducers has unique name within your application
Last modified 4yr ago