From 588c565ef57643b74205d8e1bb8c4e5a11dcc284 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svein=20Petter=20Gj=C3=B8by?= Date: Sun, 7 Oct 2018 16:47:42 +0200 Subject: [PATCH] Changed highlight theme and updated snippet language (#1035) * Changed highlight theme and updated snippet language * Try switching theme to Monokai --- docs/GettingStarted.md | 28 ++++++++++++++-------------- docs/api.md | 20 +++++++++++--------- docs/api/Provider.md | 4 ++-- docs/troubleshooting.md | 4 ++-- website/siteConfig.js | 2 +- 5 files changed, 30 insertions(+), 28 deletions(-) diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 94025179e..68126f0c8 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -19,7 +19,7 @@ npm install --save react-redux or -``` +```bash yarn add react-redux ``` @@ -64,7 +64,7 @@ Correspondingly, the `connect` function takes two arguments, both optional: Normally, you’ll call `connect` in this way: -```jsx +```js const mapStateToProps = (state, ownProps) => ({ // ... computed data from state and optionally ownProps }); @@ -185,7 +185,7 @@ Let’s work on `` first. It needs to trigger changes to the `store` Our `addTodo` action creator looks like this: -```JavaScript +```js // redux/actions.js import { ADD_TODO } from './actionTypes'; @@ -203,7 +203,7 @@ export const addTodo = content => ({ By passing it to `connect`, our component receives it as a prop, and it will automatically dispatch the action when it’s called. -```jsx +```js // components/AddTodo.js // ... other imports @@ -277,7 +277,7 @@ The `` component is responsible for rendering the list of todos. The Our `` component takes the todo item as props. We have this information from the `byIds` field of the `todos`. However, we also need the information from the `allIds` field of the store indicating which todos and in what order they should be rendered. Our `mapStateToProps` function may look like this: -```jsx +```js // components/TodoList.js // ...other imports @@ -299,7 +299,7 @@ export default connect(mapStateToProps)(TodoList); Luckily we have a selector that does exactly this. We may simply import the selector and use it here. -```jsx +```js // redux/selectors.js export const getTodosState = store => store.todos; @@ -318,7 +318,7 @@ export const getTodos = store => getTodoList(store).map(id => getTodoById(store, id)); ``` -```jsx +```js // components/TodoList.js // ...other imports @@ -354,7 +354,7 @@ If you call `connect` without providing any arguments, your component will: - _not_ re-render when the store changes - receive `props.dispatch` that you may use to manually dispatch action -```jsx +```js // ... Component export default connect()(Component); // Component will receive `dispatch` (just like our !) ``` @@ -366,7 +366,7 @@ If you call `connect` with only `mapStateToProps`, your component will: - subscribe to the values that `mapStateToProps` extracts from the store, and re-render only when those values have changed - receive `props.dispatch` that you may use to manually dispatch action -```jsx +```js // ... Component const mapStateToProps = state => state.partOfState; export default connect(mapStateToProps)(Component); @@ -379,7 +379,7 @@ If you call `connect` with only `mapDispatchToProps`, your component will: - _not_ re-render when the store changes - receive each of the action creators you inject with `mapDispatchToProps` as props and automatically dispatch the actions upon being called -```jsx +```js import { addTodo } from "./actionCreators"; // ... Component export default connect( @@ -395,7 +395,7 @@ If you call `connect` with both `mapStateToProps` and `mapDispatchToProps`, your - subscribe to the values that `mapStateToProps` extracts from the store, and re-render only when those values have changed - receive all of the action creators you inject with `mapDispatchToProps` as props and automatically dispatch the actions upon being called. -```jsx +```js import * as actionCreators from "./actionCreators"; // ... Component const mapStateToProps = state => state.partOfState; @@ -415,7 +415,7 @@ Now let’s connect the rest of our ``. How should we implement the interaction of toggling todos? A keen reader might already have an answer. If you have your environment set up and have followed through up until this point, now is a good time to leave it aside and implement the feature by yourself. There would be no surprise that we connect our `` to dispatch `toggleTodo` in a similar way: -```jsx +```js // components/Todo.js // ... other imports @@ -438,7 +438,7 @@ Finally, let’s implement our `VisibilityFilters` feature. The `` component needs to be able to read from the store which filter is currently active, and dispatch actions to the store. Therefore, we need to pass both a `mapStateToProps` and `mapDispatchToProps`. The `mapStateToProps` here can be a simple accessor of the `visibilityFilter` state. And the `mapDispatchToProps` will contain the `setFilter` action creator. -```jsx +```js // components/VisibilityFilters.js // ... other imports @@ -479,7 +479,7 @@ export const getTodosByVisibilityFilter = (store, visibilityFilter) => { And connecting to the store with the help of the selector: -```jsx +```js // components/TodoList.js // ... diff --git a/docs/api.md b/docs/api.md index f66248f00..78b2eb2db 100644 --- a/docs/api.md +++ b/docs/api.md @@ -23,7 +23,7 @@ If you *really* need to, you can manually pass `store` as a prop to every `conne #### Vanilla React -```js +```jsx ReactDOM.render( @@ -34,7 +34,7 @@ ReactDOM.render( #### React Router -```js +```jsx ReactDOM.render( @@ -92,32 +92,33 @@ It does not modify the component class passed to it; instead, it *returns* a new #### The arity of mapStateToProps and mapDispatchToProps determines whether they receive ownProps > Note: `ownProps` **is not passed** to `mapStateToProps` and `mapDispatchToProps` if the formal definition of the function contains one mandatory parameter (function has length 1). For example, functions defined like below won't receive `ownProps` as the second argument. -```javascript + +```js function mapStateToProps(state) { console.log(state); // state console.log(arguments[1]); // undefined } ``` -```javascript +```js const mapStateToProps = (state, ownProps = {}) => { console.log(state); // state console.log(ownProps); // undefined } ``` Functions with no mandatory parameters or two parameters **will receive** `ownProps`. -```javascript +```js const mapStateToProps = (state, ownProps) => { console.log(state); // state console.log(ownProps); // ownProps } ``` -```javascript +```js function mapStateToProps() { console.log(arguments[0]); // state console.log(arguments[1]); // ownProps } ``` -```javascript +```js const mapStateToProps = (...args) => { console.log(args[0]); // state console.log(args[1]); // ownProps @@ -368,7 +369,7 @@ export default connect(mapStateToPropsFactory, mapDispatchToPropsFactory)(TodoAp ## connectAdvanced -``` +```js connectAdvanced(selectorFactory, [connectOptions]) ``` @@ -426,6 +427,7 @@ Returns the wrapped component instance. Only available if you pass `{ withRef: t #### Examples #### Inject `todos` of a specific user depending on props, and inject `props.userId` into the action + ```js import * as actionCreators from './actionCreators' import { bindActionCreators } from 'redux' @@ -448,7 +450,7 @@ export default connectAdvanced(selectorFactory)(TodoApp) ## createProvider -``` +```js createProvider([storeKey]) ``` diff --git a/docs/api/Provider.md b/docs/api/Provider.md index ea5d33df8..918a57f06 100644 --- a/docs/api/Provider.md +++ b/docs/api/Provider.md @@ -31,7 +31,7 @@ In the example below, the `` component is our root-level component. This **Vanilla React Example** -```js +```jsx import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; @@ -52,7 +52,7 @@ In the example below, the `` component is our root-level component. This **Usage with React Router** -```js +```jsx import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md index 97f5dcd68..83270fa47 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.md @@ -28,7 +28,7 @@ If you’re using React Router 0.13, you might [bump into this problem](https:// Root view: -```js +```jsx Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "routerState" here ReactDOM.render( @@ -62,7 +62,7 @@ The _best_ solution to this is to make sure that your components are pure and pa If that’s not practical for whatever reason (for example, if you’re using a library that depends heavily on React context), you may pass the `pure: false` option to `connect()`: -``` +```js function mapStateToProps(state) { return { todos: state.todos } } diff --git a/website/siteConfig.js b/website/siteConfig.js index 2828e14b0..62ecf5f12 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -61,7 +61,7 @@ const siteConfig = { highlight: { // Highlight.js theme to use for syntax highlighting in code blocks. - theme: "default" + theme: "monokai" }, // Add custom scripts here that would be placed in