@4react/state 中文文档教程

发布于 5年前 浏览 25 更新于 3年前

@4react / state

React 应用程序的类似 Redux 的状态容器。

NOTE

这个包很大程度上受到 Redux 的启发。 请考虑支持他们的工作。

Usage

Import dependency

npm i @4react/state

Create Store

使用 createStore 实用程序创建商店提供者及其相应的消费者挂钩, 将商店的主要减速器传递给它。

import { createStore } from '@4react/state'

export const [ MyStore, useMyStore ] = createStore(myStoreReducer)

Provide Store

使用store provider 将商店提供给您的应用程序。

import { MyStore } from 'myStore'

const App = () => {
  return (
    <MyStore>
      <MyComponent />
    </MyStore>
  )
}

Use store

使用store custom hook retrieve store datadispatch actions

const MyInnerComponent = () => {
  const { data, dispatch } = useMyStore()

  const onClick = () => {
     dispatch({ type: 'YOUR_ACTION' })
  }

  return (
    <>
      <span>{data}</span>
      <button onClick={onClick}>
        click here
      </button>
    </>
  )
}

API

createStore()

创建一个 store provider 和它对应的 hook。

根据您要实施的状态管理类型, 你可以决定保留一个单一的全球商店, 而不是创建多个商店并将它们提供给应用程序的不同部分。

您还可以针对不同的方式使用多个嵌套商店。

createStore(reducer, [preloadedState], [enhancer])
ParamTypeDefaultDescription
reducerFunction-A reducing function that returns the next state, given the current state and an action.
preloadedStateanycomputedoptional. The initial state. If not specify the initial state is automatically computed from reducers state default value.
enhancerFunction-optional. The store enhancer. You may optionally specify it to enhance the store with third-party capabilities.

返回包含 2 个不同元素的数组:

  1. The custom store provider (see Store Provider)
  2. The custom consumer hook. (see Consumer Hook)

Store Provider

Store Provider 用于为整个应用程序提供全局存储。 它在应用程序主组件中最常用。

const App = () => {
  return (
    <MyStore>
      ...
    </MyStore>
  );
};
ParamTypeDefaultDescription
dataany-optional You can use this prop to force the providing of specific store data. It is most commonly used for testing purpose.

Consumer Hook

Consumer Hook 用于检索实际的存储状态 和调度功能。

const { data, dispatch } = useMyStore()

const { data } = useMyStore(store => store.counter)
ParamTypeDefaultDescription
selectorFunction-optional Use to retrieve a custom section of the store state.
Return (object)TypeDescription
dataanyThe actual store state or a selection of it.
dispatchFunctionThe dispatch function, used to dispatch actions

combineReducers()

类似于 Redux 的 combineReducers,它创建一个新的 reducer 从 减速器的映射。 结果函数将能够减少状态 具有传递给它的减速器地图的相同形状。

const todos = combineReducers({
  all: allReducer,
  checked: checkedReducer
})

参数:

  1. reducers (object): the map of reducers to be combined together.
  2. [initialValue] (any): This parameter is optional. If not specify the state default value is automatically computed from reducers state default state value inside the passed map.
ParamTypeDefaultDescription
reducersobject-The map of reducers to be combined together.
initialValueanycomputedoptional If not specify, it is automatically computed from reducers default states value inside the passed map.

@4react / state

A Redux-like state container for React Applications.

NOTE

This package is largely inspired by Redux. Please consider to support their work.

Usage

Import dependency

npm i @4react/state

Create Store

Use the createStore utility to create both the store provider and its corresponding consumer hook, passing the main reducer of the store to it.

import { createStore } from '@4react/state'

export const [ MyStore, useMyStore ] = createStore(myStoreReducer)

Provide Store

Use the store provider to provide the store down to your application.

import { MyStore } from 'myStore'

const App = () => {
  return (
    <MyStore>
      <MyComponent />
    </MyStore>
  )
}

Use store

Use the store custom hook to retrieve store data and dispatch actions

const MyInnerComponent = () => {
  const { data, dispatch } = useMyStore()

  const onClick = () => {
     dispatch({ type: 'YOUR_ACTION' })
  }

  return (
    <>
      <span>{data}</span>
      <button onClick={onClick}>
        click here
      </button>
    </>
  )
}

API

createStore()

Creates both a store provider and its corresponding hook.

Depending on the type of state management you want to implement, you can decide to keep a single global store, rather than creates multiple stores and provide them down to different sections of your application.

You can also use multiple nested stores for different manners.

createStore(reducer, [preloadedState], [enhancer])
ParamTypeDefaultDescription
reducerFunction-A reducing function that returns the next state, given the current state and an action.
preloadedStateanycomputedoptional. The initial state. If not specify the initial state is automatically computed from reducers state default value.
enhancerFunction-optional. The store enhancer. You may optionally specify it to enhance the store with third-party capabilities.

Returns an array containing 2 different elements:

  1. The custom store provider (see Store Provider)
  2. The custom consumer hook. (see Consumer Hook)

Store Provider

The Store Provider is used to provide global store to the entire application. It is most commonly used inside app main component.

const App = () => {
  return (
    <MyStore>
      ...
    </MyStore>
  );
};
ParamTypeDefaultDescription
dataany-optional You can use this prop to force the providing of specific store data. It is most commonly used for testing purpose.

Consumer Hook

The Consumer Hook is used to retrieve both the actual store state and the dispatch function.

const { data, dispatch } = useMyStore()

const { data } = useMyStore(store => store.counter)
ParamTypeDefaultDescription
selectorFunction-optional Use to retrieve a custom section of the store state.
Return (object)TypeDescription
dataanyThe actual store state or a selection of it.
dispatchFunctionThe dispatch function, used to dispatch actions

combineReducers()

Similar to Redux's combineReducers, it creates a new reducer starting from a map of reducers. The resulting function will be able to reduce a state with the same shape of the map of reducers passed to it.

const todos = combineReducers({
  all: allReducer,
  checked: checkedReducer
})

Arguments:

  1. reducers (object): the map of reducers to be combined together.
  2. [initialValue] (any): This parameter is optional. If not specify the state default value is automatically computed from reducers state default state value inside the passed map.
ParamTypeDefaultDescription
reducersobject-The map of reducers to be combined together.
initialValueanycomputedoptional If not specify, it is automatically computed from reducers default states value inside the passed map.
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文