@edsilv/stencil-redux

Stencil Redux 软件

由 Stencil 所建网络组件的简单再连接器 react-redux。 。 。 .

安装

npm install @stencil/redux
npm install redux

使用量

Stencil Redux 使用的是 redux 下方的库。 设置商店并定义动作,还原器,选取器等,如果使用React with Redux,则应该为您所熟悉.

配置切除根器

// redux/reducers.ts

import { combineReducers } from 'redux';

// Import feature reducers and state interfaces.
import { TodoState, todos } from './todos/reducers';

// This interface represents app state by nesting feature states.
export interface RootState {
  todos: TodoState;
}

// Combine feature reducers into a single root reducer
export const rootReducer = combineReducers({
  todos,
});

配置动作

// redux/actions.ts

import { RootState } from './reducers';

// Import feature action interfaces
import { TodoAction } from './todos/actions';

// Export all feature actions for easier access.
export * from './todos/actions';

// Combine feature action interfaces into a base type. Use union types to
// combine feature interfaces.
// https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types
export type Action = (
  TodoAction
);

配置存储

// redux/store.ts

import { Store, applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk'; // add-on you may want
import logger from 'redux-logger'; // add-on you may want

import { RootState, rootReducer } from './reducers';

export const store: Store<RootState> = createStore(rootReducer, applyMiddleware(thunk, logger));

在根组件中配置存储

// components/my-app/my-app.tsx

import { Store } from '@stencil/redux';

import { Action } from '../../redux/actions';
import { RootState } from '../../redux/reducers';
import { store } from '../../redux/store';

@Component({
  tag: 'my-app',
  styleUrl: 'my-app.scss'
})
export class MyApp {
  @Prop({ context: 'store' }) store: Store<RootState, Action>;

  componentWillLoad() {
    this.store.setStore(store);
  }
}

地图状态和发送到道具

时间轴: 说明:因为所绘制的道具在技术上已经改变 在内部 该部分, mutable: true 用于 @Prop 使用商店的定义。 见 立体文档 为信息.

// components/my-component/my-component.tsx

import { Store, Unsubscribe } from '@stencil/redux';

import { Action, changeName } from '../../redux/actions';
import { RootState } from '../../redux/reducers';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.scss'
})
export class MyComponent {
  @Prop({ context: 'store' }) store: Store<RootState, Action>;
  @Prop({ mutable: true }) name: string;

  changeName!: typeof changeName;

  unsubscribe!: Unsubscribe;

  componentWillLoad() {
    this.unsubscribe = this.store.mapStateToProps(this, state => {
      const { user: { name } } = state;
      return { name };
    });

    this.store.mapDispatchToProps(this, { changeName });
  }

  componentDidUnload() {
    this.unsubscribe();
  }

  doNameChange(newName: string) {
    this.changeName(newName);
  }
}

用法为 redux-thunk

一些Redux 中间软件,例如 redux-thunk改变商店的 dispatch() 函数,导致类型与您组件中的映射动作不匹配.

要正确输入您组件中映射的动作( 其值由 store.mapDispatchToProps()),可以使用以下类型:

import { ThunkAction } from 'redux-thunk';

export type Unthunk<T> = T extends (...args: infer A) => ThunkAction<infer R, any, any, any>
  ? (...args: A) => R
  : T;

示例

// redux/user/actions.ts

import { ThunkAction } from 'redux-thunk';

export const changeName = (name: string): ThunkAction<Promise<void>, RootState, void, Action> => async (dispatch, getState) => {
  await fetch(...); // some async operation
};

在以下构成部分中 this.changeName 从动作类型中提取 (name: string) => Promise<void>。 。 。 .

// components/my-component/my-component.tsx

import { changeName } from '../../redux/actions';

export class MyComponent {
  changeName!: Unthunk<typeof changeName>;

  componentWillLoad() {
    this.store.mapDispatchToProps(this, { changeName });
  }
}