Break React-Redux example into multiple "files" (code blocks) (#167)

* Break example into multiple "files" The previous example put all the necessary variables into one file. However, this is unrealistic and I found it confusing when first reading through the docs. Instead, I've broken each chunk of this example into its own "file", which I think reads better and will be more applicable to a user's code base. * Specify JavaScript language on code block Per @kentcdodds' PR comment: #167 (comment)

Author: SeanMcP

docs/example-react-redux.md

@@ -4,12 +4,10 @@ title: React Redux
 ---
 
 ```jsx
+// counter.js
 import React from 'react'
-import { createStore } from 'redux'
-import { Provider, connect } from 'react-redux'
-import { render, fireEvent, cleanup } from '@testing-library/react'
+import { connect } from 'react-redux'
 
-// counter.js
 class Counter extends React.Component {
  increment = () => {
  this.props.dispatch({ type: 'INCREMENT' })
@@ -33,14 +31,18 @@ class Counter extends React.Component {
  }
 }
 
-// normally this would be:
-// export default connect(state => ({count: state.count}))(Counter)
-// but for this test we'll give it a variable name
-// because we're doing this all in one file
-const ConnectedCounter = connect(state => ({ count: state.count }))(Counter)
+export default connect(state => ({count: state.count}))(Counter)
+```
+
+For this example, we'll have a simple reducer that tracks and updates `count`:
 
-// app.js
-function reducer(state = { count: 0 }, action) {
+```js
+// reducer.js
+export const initialState = {
+ count: 0
+}
+
+export function reducer(state = initialState, action) {
  switch (action.type) {
  case 'INCREMENT':
  return {
@@ -54,18 +56,18 @@ function reducer(state = { count: 0 }, action) {
  return state
  }
 }
+```
 
-// normally here you'd do:
-// const store = createStore(reducer)
-// ReactDOM.render(
-// <Provider store={store}>
-// <Counter />
-// </Provider>,
-// document.getElementById('root'),
-// )
-// but for this test we'll umm... not do that :)
+Now here's what your test will look like:
 
-// Now here's what your test will look like:
+```jsx
+// counter.test.js
+import React from 'react'
+import { createStore } from 'redux'
+import { Provider, connect } from 'react-redux'
+import { render, fireEvent, cleanup } from '@testing-library/react'
+import { initialState, reducer } from './reducer.js'
+import Counter from './counter.js'
 
 afterEach(cleanup)
 
@@ -86,13 +88,13 @@ function renderWithRedux(
 }
 
 test('can render with redux with defaults', () => {
- const { getByTestId, getByText } = renderWithRedux(<ConnectedCounter />)
+ const { getByTestId, getByText } = renderWithRedux(<Counter />)
  fireEvent.click(getByText('+'))
  expect(getByTestId('count-value').textContent).toBe('1')
 })
 
 test('can render with redux with custom initial state', () => {
- const { getByTestId, getByText } = renderWithRedux(<ConnectedCounter />, {
+ const { getByTestId, getByText } = renderWithRedux(<Counter />, {
  initialState: { count: 3 },
  })
  fireEvent.click(getByText('-'))
@@ -102,7 +104,7 @@ test('can render with redux with custom initial state', () => {
 test('can render with redux with custom store', () => {
  // this is a silly store that can never be changed
  const store = createStore(() => ({ count: 1000 }))
- const { getByTestId, getByText } = renderWithRedux(<ConnectedCounter />, {
+ const { getByTestId, getByText } = renderWithRedux(<Counter />, {
  store,
  })
  fireEvent.click(getByText('+'))