Skip to content

Commit

Permalink
feat: format based on prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
Rynxiao committed Jul 1, 2021
1 parent e747a71 commit f1815a4
Show file tree
Hide file tree
Showing 13 changed files with 172 additions and 147 deletions.
19 changes: 5 additions & 14 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
// "parserOptions": { "project": "./tsconfig.json" },
// "parserOptions": { "project": "./tsconfig.json" },
"env": { "es6": true },
"ignorePatterns": ["node_modules", "build", "coverage"],
"plugins": ["import", "eslint-comments", "functional"],
Expand All @@ -16,24 +16,15 @@
],
"globals": { "BigInt": true, "console": true, "WebAssembly": true },
"rules": {
"functional/prefer-readonly-type":"off",
"functional/prefer-readonly-type": "off",
"functional/immutable-data": "off",
"functional/no-return-void": "off",
"functional/no-let": "off",
"prefer-const": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"eslint-comments/disable-enable-pair": [
"error",
{ "allowWholeFile": true }
],
"eslint-comments/disable-enable-pair": ["error", { "allowWholeFile": true }],
"eslint-comments/no-unused-disable": "error",
"import/order": [
"error",
{ "newlines-between": "always", "alphabetize": { "order": "asc" } }
],
"sort-imports": [
"error",
{ "ignoreDeclarationSort": true, "ignoreCase": true }
]
"import/order": ["error", { "newlines-between": "always", "alphabetize": { "order": "asc" } }],
"sort-imports": ["error", { "ignoreDeclarationSort": true, "ignoreCase": true }]
}
}
2 changes: 1 addition & 1 deletion .vscode/extensions.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"eamodio.gitlens",
"streetsidesoftware.code-spell-checker",
"streetsidesoftware.code-spell-checker"
]
}
3 changes: 2 additions & 1 deletion .vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,6 @@
"outputCapture": "std",
"skipFiles": ["<node_internals>/**/*.js"]
// "smartStep": true
}]
}
]
}
6 changes: 2 additions & 4 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,14 @@ All notable changes to this project will be documented in this file. See [standa

### [0.3.6](https://github.com/qinjialei24/redux-brief/compare/v0.3.4...v0.3.6) (2021-06-27)


### Features

* add createModule api ([ad226b3](https://github.com/qinjialei24/redux-brief/commit/ad226b37fb2654fd825457af7c597938da576417))
- add createModule api ([ad226b3](https://github.com/qinjialei24/redux-brief/commit/ad226b37fb2654fd825457af7c597938da576417))

### [0.3.5](https://github.com/qinjialei24/redux-brief/compare/v0.3.4...v0.3.5) (2021-06-25)

### 0.3.4 (2021-06-25)


### Features

* add api Provider ([b12ca1d](https://github.com/qinjialei24/redux-brief/commit/b12ca1d409c0ca2b277e8a019a29ad52844e5ea0))
- add api Provider ([b12ca1d](https://github.com/qinjialei24/redux-brief/commit/b12ca1d409c0ca2b277e8a019a29ad52844e5ea0))
131 changes: 76 additions & 55 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,90 @@

> make redux easier to use
## 这个库是对 Redux的轻量级封装,完全兼容已有的 Redux 生态,相比直接使用 Redux ,有如下优点。
## 这个库是对 Redux 的轻量级封装,完全兼容已有的 Redux 生态,相比直接使用 Redux ,有如下优点。

- 完全消除 action 的模板代码
- Typescript 类型安全
- 内置 immer,提升开发体验
- 使用 reducer 从未如此方便

## Quickstart

```
yarn add redux-brief
```

## API
### 步骤1: 定义 Reducer 模块

### 步骤 1: 定义 Reducer 模块

#### user 模块

```ts
import {createModule} from 'redux-brief'
export const namespace ='user'
import { createModule } from 'redux-brief';
export const namespace = 'user';
export const state = {
name: '',
age: 0
}
age: 0,
};

export const userModule = createModule({
namespace,
state,
reducer: {
setUserName(name:string, state) {
state.name = name
setUserName(name: string, state) {
state.name = name;
},
setAge(age:number, state) {
state.age = age
setAge(age: number, state) {
state.age = age;
},
},
})
});
```

#### count 模块

```tsx
import {createModule} from "redux-brief";
export const namespace = 'count'
import { createModule } from 'redux-brief';
export const namespace = 'count';
export const state = {
money: 10,
count: 10,
count2: '',
}
};

export const countModule = createModule({
namespace,
state,
reducer: {
add(payload: number, state) {
state.money += payload
state.money += payload;
},
add2(payload: string, state) {
state.count2 += payload
state.count2 += payload;
},
minus(payload: number, state) {
state.money -= 1
state.money -= 1;
},
}
})
},
});
```

### 步骤2: 生成 Store
### 步骤 2: 生成 Store

```ts
import {run} from "redux-brief";
import thunk from 'redux-thunk'
import {countModule, namespace as countNamespace, state as countState} from "./modules/count";
import {userModule, namesapce as userNamespace, state as userState} from "./modules/user";
import { run } from 'redux-brief';
import thunk from 'redux-thunk';
import {
countModule,
namespace as countNamespace,
state as countState,
} from './modules/count';
import {
userModule,
namesapce as userNamespace,
state as userState,
} from './modules/user';

const modules = {
[countNamespace]: countModule,
Expand All @@ -90,38 +103,40 @@ const { store, reducers } = run<Modules>({ modules });
export { store, reducers };
```

### 步骤3: 挂载 Store 到根组件上
### 步骤 3: 挂载 Store 到根组件上

```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from "redux-brief";
import { store } from "./store"; // 引入步骤2生成的 store
import { Provider } from 'redux-brief';
import { store } from './store'; // 引入步骤2生成的 store

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
);
```


### 组件内使用

```tsx
import React from 'react';
import { useSelector } from 'redux-brief'
import { AppState, reducers, store } from "./store";
import { useSelector } from 'redux-brief';
import { AppState, reducers, store } from './store';

function App() {
const money = useSelector((state: AppState) => state.count.money)
const name = useSelector((state: AppState) => state.user.name)
const money = useSelector((state: AppState) => state.count.money);
const name = useSelector((state: AppState) => state.user.name);

function minusAsync() { // 异步场景
function minusAsync() {
// 异步场景
return (dispatch) => {
setTimeout(() => {
dispatch({
type:'count/minus'
type: 'count/minus',
});
}, 1000);
};
Expand All @@ -130,35 +145,41 @@ function App() {
const renderCount = () => {
return (
<div>
<button onClick={() => {
reducers.count.add(1)
}}> 加 1 </button>

<button
onClick={() => {
reducers.count.add(1);
}}
>
{' '}
加 1{' '}
</button>

<h1>money:{money}</h1>

<button onClick={() => {
store.dispatch(minusAsync() as any)
}}>一秒后减 1</button>

<button onClick={() => {
reducers.user.setUserName('kobe bryant')
}}>
<button
onClick={() => {
store.dispatch(minusAsync() as any);
}}
>
一秒后减 1
</button>

<button
onClick={() => {
reducers.user.setUserName('kobe bryant');
}}
>
设置用户名
</button>
<h1>name:{name}</h1>
</div>
)
}
);
};

return (
<div className="App">
{renderCount()}
</div>
);
return <div className="App">{renderCount()}</div>;
}

export default App;

```
[完整 demo 项目链接](https://github.com/qinjialei24/xxxx)

[完整 demo 项目链接](https://github.com/qinjialei24/xxxx)
4 changes: 3 additions & 1 deletion check-yarn.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
if (!/yarn\.js$/.test(process.env.npm_execpath || '')) {
// eslint-disable-next-line no-console
console.warn('\u001b[33mThis repository requires Yarn 1.x for scripts to work properly.\u001b[39m\n');
console.warn(
'\u001b[33mThis repository requires Yarn 1.x for scripts to work properly.\u001b[39m\n'
);
process.exit(1);
}
2 changes: 1 addition & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
collectCoverage: true
collectCoverage: true,
};
4 changes: 2 additions & 2 deletions src/api.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { createModule } from './core';

import { Provider,run, useSelector } from './index'
import { Provider, run, useSelector } from './index';

export {Provider,run, useSelector,createModule}
export { Provider, run, useSelector, createModule };
Loading

0 comments on commit f1815a4

Please sign in to comment.