Skip to content

Commit

Permalink
docs(website): update docs to latest changes
Browse files Browse the repository at this point in the history
  • Loading branch information
christianalfoni committed Jan 15, 2019
1 parent e8ed416 commit a9d87fc
Show file tree
Hide file tree
Showing 9 changed files with 29 additions and 17 deletions.
6 changes: 4 additions & 2 deletions packages/overmind-website/api/action.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
h(Example, { name: "api/action"})
```

An action is where you write the logic of the application. Every action receives one argument called the **context**. This context holds the state of application, whatever effects you have defined and optionally value passed in when the action was called.
An action is where you write the logic of the application. Every action receives one argument called the **context**. This context holds:

This context gives Overmind the ability to understand what state you are changing and what effects you are running. Additionally this context makes your actions highly testable as it can easily be mocked.
`{ state, actions, ...effects }`

This context gives Overmind the primarily the ability to understand what state you are changing and what effects you are running. You can also use other actions defined in your application. Additionally this context makes your actions highly testable as it can easily be mocked.

State changes are restricted to these actions. That means if you try to change the state outside of an action you will get an error. The state changes are also scoped to the action. That means it does not matter if you perform the state change asynchronously, either by defining the action as an **async** function or for example use a **setTimeout**. You can change the state at any time within the action.
14 changes: 12 additions & 2 deletions packages/overmind-website/examples/api/onInitialize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ export default (ts, view) =>
code: `
import { OnInitialize } from 'overmind'
const onInitialize: OnInitialize = async ({ value: overmind, state, api }) => {
const onInitialize: OnInitialize = async ({
value: overmind,
state,
actions,
api
}) => {
const initialData = await api.getInitialData()
state.initialData = initialData
}
Expand Down Expand Up @@ -38,7 +43,12 @@ const config = {
{
fileName: 'overmind/onInitialize.js',
code: `
const onInitialize = async ({ value: overmind, state, api }) => {
const onInitialize = async ({
value: overmind,
state,
actions,
api
}) => {
const initialData = await api.getInitialData()
state.initialData = initialData
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import { connect, Connect } from '../overmind'
type Props = {} & Connect
const App: React.FunctionComponent<Props> = ({ overmind }) => {
const { state, actions } = overmind
const { state, actions, effects, addMutationListener } = overmind
return <div />
}
Expand Down Expand Up @@ -65,7 +65,7 @@ import React from 'react'
import { connect } from '../overmind'
const App = ({ overmind }) => {
const { state, actions } = overmind
const { state, actions, effects, addMutationListener } = overmind
return <div />
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ class App extends React.Component<Props> {
return this.props.overmind !== nextProps.overmind
}
render() {
const { state, actions } = this.props.overmind
return <div />
}
}
Expand All @@ -36,8 +34,6 @@ class App extends React.Component {
return this.props.overmind !== nextProps.overmind
}
render() {
const { state, actions } = this.props.overmind
return <div />
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import * as React from 'react'
import { useOvermind } from '../overmind'
const App: React.FunctionComponent = () => {
const { state, actions } = useOvermind()
const { state, actions, effects, addMutationListener } = useOvermind()
return <div />
}
Expand Down Expand Up @@ -61,7 +61,7 @@ import React from 'react'
import { useOvermind } from '../overmind'
const App = () => {
const { state, actions } = useOvermind()
const { state, actions, effects, addMutationListener } = useOvermind()
return <div />
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,16 @@ All the actions defined in the Overmind application is available to connected co
h(Example, { name: "guide/connectingcomponents/actions" })
```

## Effects
## Reactions

Sometimes you want to make something happen inside a component related to a state change. This is typically doing some manual work on the DOM. When you connect a component to overmind it also gets access to **addMutationListener**. This function allows you to subscribe to changes in state, mutations as we call them. Each mutation holds information about what kind of mutation it was, at what path it happened and even any arguments used in the mutation. You can use all this information to create an effect.

This example shows how you can scroll to the top of the page every time you change the current article of the app.

```marksy
h(Example, { name: "guide/connectingcomponents/effects" })
```
```

## Effects

Any effects you define in your Overmind application is also exposed to the components. They can be found on the property **effects**. It is encouraged that you keep your logic inside actions, but you might be in a situation where you want some other relationship between components and Overmind. A shared effect is the way to go.
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ If you pass a state object or array as a property to a child component you will
h(Example, { name: "guide/usingovermindwithreact/hoc_passprop" })
```

### Effects
### Reactions

To run effects in components based on changes to state you use the **addMutationListener** function in the lifecycle hooks of React.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ If you pass a state object or array as a property to a child component you will
h(Example, { name: "guide/usingovermindwithangular/passprop" })
```

## Effects
## OvermindProvider

To run effects in components based on changes to state you use the **addMutationListener** function in the lifecycle hooks of Angular.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ If you pass a state object or array as a property to a child component you will
h(Example, { name: "guide/usingovermindwithvue/passprops" })
```

## Effects
## OvermindProvider

To run effects in components based on changes to state you use the **addMutationListener** function in the lifecycle hooks of Vue.

Expand Down

0 comments on commit a9d87fc

Please sign in to comment.