用Effector替代原来的状态管理器，why？

1. effector是什么？

effector 是一个全新的状态管理器，目标就是要解决之前redux，mobx 这些状态管理存在的问题。

2. Store

A store is an object that holds some value. We can create stores with the createStore store是轻量的！！！

import {createStore} from 'effector'
const counter = createStore(0) // create store with zero as default value
counter.watch(console.log) // watch store changes

3. Event

So how do we update our store? Events! You create events with the createEvent 用event来更新数据！！！

import {createStore, createEvent} from 'effector'

const increment = createEvent('increment')
const decrement = createEvent('decrement')
const resetCounter = createEvent('reset counter')

const counter = createStore(0)
  .on(increment, state => state + 1) // subscribe to the event and return new store value
  .on(decrement, state => state - 1)  
  .reset(resetCounter)

counter.watch(console.log)

这里的createEvent返回的是个函数，可以再程序的其他地方调用它，我理解类似于dispatch action。

4. effector-react

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore, createEvent} from 'effector'
import {useStore} from 'effector-react'

const increment = createEvent('increment')
const decrement = createEvent('decrement')
const resetCounter = createEvent('reset counter')

const counter = createStore(0)
  .on(increment, state => state + 1)
  .on(decrement, state => state - 1)
  .reset(resetCounter)

counter.watch(console.log)

const Counter = () => {
  const value = useStore(counter) // subscribe to store changes

  return (
    <>
      <div>Count: {value}</div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={resetCounter}>reset</button>
    </>
  )
}

const App = () => <Counter />
const div = document.createElement('div')
document.body.appendChild(div)
ReactDOM.render(
  <App/>,
  div
)

5. createEffect

用来替代chunk 、saga 这类的中间件

const getUser = createEffect('get user');
getUser.use(params => {
  return fetch(`https://example.com/get-user/${params.id}`)
    .then(res => res.json())
})

// OR

const getUser = createEffect('get user', {
  handler: params => fetch(`https://example.com/get-user/${params.id}`)
    .then(res => res.json())
})

const users = createStore([]) // <-- Default state
  // getUser.done is the event that fires whenever a promise returned by the effect is resolved
  .on(getUser.done, (state, {result, params}) => [...state, result])

6. combine

多个store合成一个

const balance = createStore(0)
const username = createStore('zerobias')

const greeting = combine(balance, username, (balance, username) => {
  return `Hello, ${username}. Your balance is ${balance}`
})

greeting.watch(data => console.log(data)) // Hello, zerobias. Your balance is 0

7. map 派生store

生成派生的store

const title = createStore("")
const changed = createEvent()

const length = title.map((title) => title.length)

title.on(changed, (oldTitle, newTitle) => newTitle)

length.watch((length) => console.log("new length is ", length)) // new length is 0

changed("hello") // new length is 5
changed("world")
changed("hello world") // new length is 11

8. 总结

简洁的状态管理，适用于较大的项目。 其他api可以留言讨论。 或者自行查阅官方文档。