Skip to content

Commit

Permalink
Update tutorials for v0.8 (#213)
Browse files Browse the repository at this point in the history
* Update basic tutorial with createSlice changes

* Update intermediate tutorial with createSlice changes

* Update advanced tutorial with createSlice changes

* Change existing commit links to point to reduxjs org repos
  • Loading branch information
markerikson authored Oct 13, 2019
1 parent cd8f9e5 commit 555d9b1
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 44 deletions.
36 changes: 18 additions & 18 deletions docs/tutorials/advanced-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ In the process, we'll look at a few examples of TypeScript techniques you can us
>
> In addition, this tutorial does not mean you _must_ convert your React app logic completely to Redux. [It's up to you to decide what state should live in React components, and what should be in Redux](https://redux.js.org/faq/organizing-state#do-i-have-to-put-all-my-state-into-redux-should-i-ever-use-reacts-setstate). This is just an example of how you _could_ convert logic to use Redux if you choose to.
The complete source code for the converted application from this tutorial is available at [github.com/markerikson/rsk-github-issues-example](https://github.com/markerikson/rsk-github-issues-example). We'll be walking through the conversion process as shown in this repo's history. Links to meaningful individual commits will be highlighted in quote blocks, like this:
The complete source code for the converted application from this tutorial is available at [github.com/reduxjs/rsk-github-issues-example](https://github.com/reduxjs/rsk-github-issues-example). We'll be walking through the conversion process as shown in this repo's history. Links to meaningful individual commits will be highlighted in quote blocks, like this:

> - Commit message here
Expand Down Expand Up @@ -52,15 +52,15 @@ The codebase is already laid out in a "feature folder" structure, The main piece

Since this app doesn't yet use Redux at all, the first step is to install Redux Starter Kit and React-Redux. Since this is a TypeScript app, we'll also need to add `@types/react-redux` as well. Add those packages to the project via either Yarn or NPM.

> - [Add Redux Starter Kit and React-Redux packages](https://github.com/markerikson/rsk-github-issues-example/commit/8f69804d8940ba40604949ca682a7ae968e8bc4f)
> - [Add Redux Starter Kit and React-Redux packages](https://github.com/reduxjs/rsk-github-issues-example/commit/8f69804d8940ba40604949ca682a7ae968e8bc4f)
Next, we need to set up the usual pieces: a root reducer function, the Redux store, and the `<Provider>` to make that store available to our component tree.

In the process, we're going to set up "Hot Module Replacement" for our app. That way, whenever we make a change to the reducer logic or the component tree, Create-React-App will rebuild the app and swap the changed code into our running app, without having to completely refresh the page.

#### Creating the Root Reducer

> - [Add store and root reducer with reducer HMR](https://github.com/markerikson/rsk-github-issues-example/commit/26054ea8be1a44cac75fd55f497ce20e264de2b0)
> - [Add store and root reducer with reducer HMR](https://github.com/reduxjs/rsk-github-issues-example/commit/26054ea8be1a44cac75fd55f497ce20e264de2b0)
First, we'll create the root reducer function. We don't have any slices yet, so it will just return an empty object.

Expand Down Expand Up @@ -113,7 +113,7 @@ The `require('./rootReducer').default` looks a bit odd. That's because we're mix

Now that the store has been created, we can add it to the React component tree.

> - [Render Redux Provider with app HMR](https://github.com/markerikson/rsk-github-issues-example/commit/49cf5caebd427e7bb6b7ab07098c3bbb12134faf)
> - [Render Redux Provider with app HMR](https://github.com/reduxjs/rsk-github-issues-example/commit/49cf5caebd427e7bb6b7ab07098c3bbb12134faf)
As with the root reducer, we can hot-reload the React component tree whenever a component file changes. The best way is to write a function that imports the `<App>` component and renders it, call that once on startup to show the React component tree as usual, and then reuse that function any time a component is changed.

Expand Down Expand Up @@ -170,7 +170,7 @@ The first step is to look at the data that is currently being kept in `<App>`, a

Let's look at the source for the whole slice, and then break down what it's doing:

> - [Add initial state slice for UI display](https://github.com/markerikson/rsk-github-issues-example/commit/ec809346d5afe8f96bb56e487c2e41d274d80c69)
> - [Add initial state slice for UI display](https://github.com/reduxjs/rsk-github-issues-example/commit/ec809346d5afe8f96bb56e487c2e41d274d80c69)
**features/issuesDisplay/issuesDisplaySlice.ts**

Expand Down Expand Up @@ -206,7 +206,7 @@ let initialState: CurrentDisplayState = {
}

const issuesDisplaySlice = createSlice({
slice: 'issuesDisplay',
name: 'issuesDisplay',
initialState,
reducers: {
displayRepo(state, action: PayloadAction<CurrentRepo>) {
Expand Down Expand Up @@ -288,7 +288,7 @@ import { combineReducers } from 'redux-starter-kit'

Now that the issues display slice is hooked up to the store, we can update `<App>` to use that instead of its internal component state.

> - [Convert main issues display control to Redux](https://github.com/markerikson/rsk-github-issues-example/commit/07bea70da4439c4c38b9b8d4eb0f10c67e6feee2)
> - [Convert main issues display control to Redux](https://github.com/reduxjs/rsk-github-issues-example/commit/07bea70da4439c4c38b9b8d4eb0f10c67e6feee2)
We need to make three groups of changes to the `App` component:

Expand Down Expand Up @@ -514,7 +514,7 @@ Since the thunk middleware is already set up, we don't have to do any work there

Before we go any further, let's add a type declaration we can reuse instead.

> - [Add AppThunk type](https://github.com/markerikson/rsk-github-issues-example/commit/2ac93bb089705847a8ce349864d885a5039eff4b)
> - [Add AppThunk type](https://github.com/reduxjs/rsk-github-issues-example/commit/2ac93bb089705847a8ce349864d885a5039eff4b)
**app/store.ts**

Expand Down Expand Up @@ -544,7 +544,7 @@ There are many cases where you would want different type settings here, but thes

Now that we have that type, we can write a slice of state for fetching details on a repo.

> - [Add a slice for storing repo details](https://github.com/markerikson/rsk-github-issues-example/commit/da9291bf428a96c3f2e8862f42e3be08461d514c)
> - [Add a slice for storing repo details](https://github.com/reduxjs/rsk-github-issues-example/commit/da9291bf428a96c3f2e8862f42e3be08461d514c)
**features/repoSearch/repoDetailsSlice.ts**

Expand All @@ -566,7 +566,7 @@ const initialState: RepoDetailsState = {
}

const repoDetails = createSlice({
slice: 'repoDetails',
name: 'repoDetails',
initialState,
reducers: {
getRepoDetailsSuccess(state, action: PayloadAction<RepoDetails>) {
Expand Down Expand Up @@ -615,7 +615,7 @@ While not shown, we also add the slice reducer to our root reducer.

Now that the repo details slice exists, we can use it in the `<IssuesListPage>` component.

> - [Update IssuesListPage to fetch repo details via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/964134a00bc1a54ba8758ca274049c9174e88f9a)
> - [Update IssuesListPage to fetch repo details via Redux](https://github.com/reduxjs/rsk-github-issues-example/commit/964134a00bc1a54ba8758ca274049c9174e88f9a)
**features/issuesList/IssuesListPage.tsx**

Expand Down Expand Up @@ -694,7 +694,7 @@ Inside our `useEffect`, we drop the `fetchIssueCount` function, and dispatch `fe

Next up, we need to replace the logic for fetching a list of open issues.

> - [Add a slice for tracking issues state](https://github.com/markerikson/rsk-github-issues-example/commit/b2e5919651a5076e3857da96321bc979a8ae54b9)
> - [Add a slice for tracking issues state](https://github.com/reduxjs/rsk-github-issues-example/commit/b2e5919651a5076e3857da96321bc979a8ae54b9)
**features/issuesList/issuesSlice.ts**

Expand Down Expand Up @@ -733,7 +733,7 @@ function loadingFailed(state: IssuesState, action: PayloadAction<string>) {
}

const issues = createSlice({
slice: 'issues',
name: 'issues',
initialState: issuesInitialState,
reducers: {
getIssueStart: startLoading,
Expand Down Expand Up @@ -811,7 +811,7 @@ This slice is a bit longer, but it's the same basic approach as before: write th

Now we can finish converting the `<IssuesListPage>` component by swapping out the issues fetching logic.

> - [Update IssuesListPage to fetch issues data via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/8dbdc0726ccecf354a01351786196648c752c0a6)
> - [Update IssuesListPage to fetch issues data via Redux](https://github.com/reduxjs/rsk-github-issues-example/commit/8dbdc0726ccecf354a01351786196648c752c0a6)
Let's look at the changes.

Expand Down Expand Up @@ -950,7 +950,7 @@ It's very similar to `<IssuesListPage>`. We store the current displayed `Issue`,

We conveniently already have the Redux logic for fetching a single issue - we wrote that already as part of `issuesSlice.ts`. So, we can immediately jump straight to using that here in `<IssueDetailsPage>`.

> - [Update IssueDetailsPage to fetch issue data via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/46bcddbe1078574fab649a13f61a6bf3d0f42839)
> - [Update IssueDetailsPage to fetch issue data via Redux](https://github.com/reduxjs/rsk-github-issues-example/commit/46bcddbe1078574fab649a13f61a6bf3d0f42839)
**features/issueDetails/IssueDetailsPage.tsx**

Expand Down Expand Up @@ -1015,7 +1015,7 @@ Interestingly, there's actually a bit of a change in behavior here. The original

We have one more slice left to write - we need to fetch and store comments for the current issue.

> - [Add a slice for tracking comments data](https://github.com/markerikson/rsk-github-issues-example/commit/46bcddbe1078574fab649a13f61a6bf3d0f42839)
> - [Add a slice for tracking comments data](https://github.com/reduxjs/rsk-github-issues-example/commit/46bcddbe1078574fab649a13f61a6bf3d0f42839)
**features/issueDetails/commentsSlice.ts**

Expand Down Expand Up @@ -1043,7 +1043,7 @@ const initialState: CommentsState = {
}

const comments = createSlice({
slice: 'comments',
name: 'comments',
initialState,
reducers: {
getCommentsStart(state) {
Expand Down Expand Up @@ -1087,7 +1087,7 @@ The slice should look pretty familiar at this point. Our main bit of state is a

The final step is to swap the comments fetching logic in `<IssueDetailsPage>`.

> - [Update IssueDetailsPage to fetch comments via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/9d1246a4d89f21da1f0e5377f040bc766e1fc0fd)
> - [Update IssueDetailsPage to fetch comments via Redux](https://github.com/reduxjs/rsk-github-issues-example/commit/9d1246a4d89f21da1f0e5377f040bc766e1fc0fd)
**features/issueDetails/IssueDetailsPage.tsx**

Expand Down
1 change: 1 addition & 0 deletions docs/tutorials/basic-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ Here's what our counter example would look like using `createSlice` instead:

```js
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: state => state + 1,
Expand Down
Loading

0 comments on commit 555d9b1

Please sign in to comment.