在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:statty开源软件地址:https://gitee.com/mirrors/statty开源软件介绍:statty
The current size of The problemMost of the time, I see colleagues starting React projects setting up Redux + a bunch of middlewares and store enhancers by default, regardless of the project nature. Despite Redux being awesome, it's not always needed and it may slow down the process of onboarding new developers, especially if they are new to the React ecosystem (I have often seen colleagues being stuck for hours trying to understand what was the proper way to submit a simple form). React already comes with a built-in state management mechanism, In real world apps we often have app state, and sometimes it becomes annoying to pass it down the entire component tree, along with callbacks to update it, via props. This solution
It safely leverages context to expose application state to children, along with a function to update it when needed. The update function acts like Redux dispatch, but instead of an action, it takes an This way it's easy to write testable updaters and to organize them as you prefer, without having to write boilerplate code. Table of ContentsInstallationThis project uses node and npm. Check them out if you don't have them locally installed. $ npm i statty Then with a module bundler like rollup or webpack, use as you would anything else: // using ES6 modulesimport statty from 'statty'// using CommonJS modulesvar statty = require('statty') The UMD build is also available on unpkg: <script src="https://unpkg.com/statty/dist/statty.umd.js"></script> You can find the library on Usage// https://codesandbox.io/s/rzpxx0w34import React from 'react'import { render } from 'react-dom'import { Provider, State } from 'statty'import inspect from 'statty/inspect'// selector is a function that returns a slice of the state// if not specified it defaults to f => fconst selector = state => ({ count: state.count })// updaters// updaters MUST be pure and return a complete new state,// like Redux reducersconst onDecrement = state => Object.assign({}, state, { count: state.count - 1 })const onIncrement = state => Object.assign({}, state, { count: state.count + 1 })// Counter uses a <State> component to access the state// and the update function used to execute state mutationsconst Counter = () => ( <State select={selector} render={({ count }, update) => ( <div> <span>Clicked: {count} times </span> <button onClick={() => update(onIncrement)}>+</button>{' '} <button onClick={() => update(onDecrement)}>-</button>{' '} </div> )} />)// initial stateconst initialState = { count: 0}// The <Provider> component is supposed to be placed at the top// of your application. It accepts the initial state and an inspect function// useful to log state mutatations during development// (check your dev tools to see it in action)const App = () => ( <Provider state={initialState} inspect={inspect}> <Counter /> </Provider>)render(<App />, document.getElementById('root')) The
State updates happen via special An updater function may return the slice of the state that changed or an entire new state. In the first case the new slice will be shallowly merged with old state. API
|
请发表评论