|
@@ -8,16 +8,16 @@
|
|
|
|
|
|
## Video 4: Setting up React Router
|
|
|
|
|
|
-```javascript
|
|
|
+```jsx
|
|
|
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
|
|
|
|
|
|
const router = (
|
|
|
<Router history={browserHistory}>
|
|
|
<Route path='/' component={Main}>
|
|
|
- <IndexRoute component={} \/>
|
|
|
- <Route path='/view/:postId' \/>
|
|
|
- <\/Route>
|
|
|
- <\/Router>
|
|
|
+ <IndexRoute component={} />
|
|
|
+ <Route path='/view/:postId' />
|
|
|
+ </Route>
|
|
|
+ </Router>
|
|
|
)
|
|
|
|
|
|
render(router, document.getElementById('root'))
|
|
@@ -30,7 +30,7 @@ render(router, document.getElementById('root'))
|
|
|
* One giant state for all data
|
|
|
* it is called `store`
|
|
|
|
|
|
-```javascript
|
|
|
+```jsx
|
|
|
import { createStore, compose } from 'redux'
|
|
|
import { syncHistoryWithStore } from 'react-router-redux'
|
|
|
import { browserHistory } from 'react-router'
|
|
@@ -47,7 +47,7 @@ export default store
|
|
|
* actions are objects with two elements: type and payload
|
|
|
* action creators are functions which return actions:
|
|
|
|
|
|
-```javascript
|
|
|
+```jsx
|
|
|
function increment(index) {
|
|
|
return {
|
|
|
type: 'INCREMENT_LIKES',
|
|
@@ -73,7 +73,7 @@ function addComment(postId, author, comment) {
|
|
|
* reducers return the updated state if there is a change, or the previous state
|
|
|
* always start like this and then add some conditional functionality:
|
|
|
|
|
|
-```javascript
|
|
|
+```jsx
|
|
|
function posts(state = [], action) {
|
|
|
if (...) {
|
|
|
return nextState
|
|
@@ -86,7 +86,7 @@ export default posts
|
|
|
|
|
|
* combine them in a root reducer
|
|
|
|
|
|
-```javascript
|
|
|
+```jsx
|
|
|
import { combineReducers } from 'redux'
|
|
|
import { routerReducer } from 'react-router-redux'
|
|
|
|
|
@@ -128,7 +128,7 @@ export default rootReducer
|
|
|
* actions invoke state changes
|
|
|
* reducers change the state
|
|
|
* the store provides a dispatch function
|
|
|
- ```javascript
|
|
|
+ ```jsx
|
|
|
// on the console
|
|
|
$r.store.dispatch({type: 'INCREMENT', index: 1})
|
|
|
```
|
|
@@ -139,7 +139,7 @@ export default rootReducer
|
|
|
* in regular React, the state or parts of it are propagated via props
|
|
|
* in Redux, `connect` injects the data in the components that need it
|
|
|
* for that, we wrap the main component with one that has the state and dispatcher propagated
|
|
|
- ```javascript
|
|
|
+ ```jsx
|
|
|
import { bindActionCreators } from 'redux'
|
|
|
import { connect } from 'react-redux'
|
|
|
import * as actionCreators from './actions/actionCreators'
|
|
@@ -168,7 +168,7 @@ export default rootReducer
|
|
|
## Video 12: Updating State with Reducers
|
|
|
* Once you propagate the reducer function to the component, this is how you pass arguments to the function call
|
|
|
- Remember that `<button onClick={this.props.function(argument)} ...>` would call the function at document load!
|
|
|
- ```javascript
|
|
|
+ ```jsx
|
|
|
<button onClick={this.props.function.bind(null, argument)} ...>
|
|
|
```
|
|
|
|
|
@@ -176,7 +176,7 @@ export default rootReducer
|
|
|
- Makes testing easier.
|
|
|
- Enables Redux dev tools, time travel etc.
|
|
|
* Do the same as in React state handling: Copy, modify, return copy:
|
|
|
- ```javascript
|
|
|
+ ```jsx
|
|
|
function posts(state = [], action) {
|
|
|
switch(action.type) {
|
|
|
const i = action.index
|
|
@@ -195,7 +195,7 @@ export default rootReducer
|
|
|
## Video 13: Displaying the Single Photo Component
|
|
|
* Polyfills are new ES6 functions cross compiled for old browsers through Babel. [Example for findIndex()][1]
|
|
|
* You can use `findIndex()` to get a certain element of an array
|
|
|
- ```javascript
|
|
|
+ ```jsx
|
|
|
render () {
|
|
|
const { postId } = this.props.params
|
|
|
const i = this.props.posts.findIndex((post) => post.code === postId)
|