57426a2849
This PR updates the minimum version of React used by examples from 17.0.2 to 18.2.0. Fixes #41975 ## Bug - [x] Related issues linked using `fixes #41975` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm build && pnpm lint` - [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) |
||
---|---|---|
.. | ||
pages | ||
shared | ||
.gitignore | ||
package.json | ||
README.md |
Rematch example
This example has two pages. The first page has a counter which can be incremented synchronously or asynchronously. The second page is a page which shows a list of github users. It fetches data from the github api using this endpoint.
Since rematch is utility which uses redux under the hood, some elements like store.js
and withRematch
are very similar to the with-redux
example. Please go through the with-redux
example before reading further if you are not familiar with how redux is integrated with Next.js. Rematch is just an extension for Redux so a lot of elements are the same.
Deploy your own
Deploy the example using Vercel or preview live with StackBlitz
How to use
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example::
npx create-next-app --example with-rematch with-rematch-app
yarn create next-app --example with-rematch with-rematch-app
pnpm create next-app --example with-rematch with-rematch-app
Deploy it to the cloud with Vercel (Documentation).
Directory structure
Besides the pages
directory, there is a directory called shared which holds all of the code belonging to rematch. Rematch
has a lot lesser boilerplate than Redux
because it is able to put actions(including async actions), models and reducers together. Hence, a models
directory is present, which contains the logic for counter
and github
users.
Some features of this example are :
- Pages are connected to rematch using
withRematch
util. These pages are capable of accessing values from the store and dispatching changes - Components are inside the
shared/components
folder. Thecounter-display
component is connected to the store using theconnect
function to show how components which are not pages, can connect with Rematch. - The file
shared/store
exports an initStore function which is used bywithRematch
to create store universally on the server and on the client.