├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .travis.yml
├── LICENSE.md
├── README.md
├── example
├── .gitignore
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── models
│ │ ├── counter.js
│ │ └── index.js
│ └── serviceWorker.js
└── yarn.lock
├── package.json
├── src
└── index.js
├── webpack.config.babel.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | ["transform-es2015-template-literals", { "loose": true }],
4 | "transform-es2015-literals",
5 | "transform-es2015-function-name",
6 | "transform-es2015-arrow-functions",
7 | "transform-es2015-block-scoped-functions",
8 | ["transform-es2015-classes", { "loose": true }],
9 | "transform-es2015-object-super",
10 | "transform-es2015-shorthand-properties",
11 | ["transform-es2015-computed-properties", { "loose": true }],
12 | ["transform-es2015-for-of", { "loose": true }],
13 | "transform-es2015-sticky-regex",
14 | "transform-es2015-unicode-regex",
15 | "check-es2015-constants",
16 | ["transform-es2015-spread", { "loose": true }],
17 | "transform-es2015-parameters",
18 | ["transform-es2015-destructuring", { "loose": true }],
19 | "transform-es2015-block-scoping",
20 | "transform-es3-member-expression-literals",
21 | "transform-es3-property-literals",
22 | ],
23 | "env": {
24 | "commonjs": {
25 | "plugins": [
26 | ["transform-es2015-modules-commonjs", { "loose": true }],
27 | ]
28 | },
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs.
2 | # Requires EditorConfig JetBrains Plugin - http://github.com/editorconfig/editorconfig-jetbrains
3 |
4 | # Set this file as the topmost .editorconfig
5 | # (multiple files can be used, and are applied starting from current document location)
6 | root = true
7 |
8 | # Use bracketed regexp to target specific file types or file locations
9 | [*.{js,json}]
10 |
11 | # Use hard or soft tabs ["tab", "space"]
12 | indent_style = space
13 |
14 | # Size of a single indent [an integer, "tab"]
15 | indent_size = tab
16 |
17 | # Number of columns representing a tab character [an integer]
18 | tab_width = 2
19 |
20 | # Line breaks representation ["lf", "cr", "crlf"]
21 | end_of_line = lf
22 |
23 | # ["latin1", "utf-8", "utf-16be", "utf-16le"]
24 | charset = utf-8
25 |
26 | # Remove any whitespace characters preceding newline characters ["true", "false"]
27 | trim_trailing_whitespace = true
28 |
29 | # Ensure file ends with a newline when saving ["true", "false"]
30 | insert_final_newline = true
31 |
32 | # Markdown files
33 | [*.md]
34 |
35 | # Trailing whitespaces are significant in Markdown.
36 | trim_trailing_whitespace = false
37 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "eslint-config-airbnb",
3 | "env": {
4 | "mocha": true,
5 | "node": true
6 | },
7 | "globals": {
8 | "expect": true
9 | },
10 | "rules": {
11 | "padded-blocks": 0,
12 | "no-use-before-define": [2, "nofunc"],
13 | "no-unused-expressions": 0
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | *.log
4 | lib
5 | dist
6 | es
7 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "node"
4 | script:
5 | - npm run build
6 | - npm test
7 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015-present Dan Abramov
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Redux To Vuex
2 | =============
3 | > 像书写vuex一样书写redux！
4 |
5 | 安装
6 | =============
7 | ```js
8 | npm install redux-to-vuex
9 | ```
10 | 使用
11 | =============
12 | 如果你使用过dva那么redux-to-vuex跟他很像，但是redux-to-vuex只是改造actions、reducers,并没有重写，因此在一些只使用原生redux的项目中（多数为小程序）或者无法忍受redux复杂的书写，可以尝试使用redux-to-vuex。
13 |
14 | **models/model**
15 | ```
16 | export default {
17 | // 命名空间
18 | namespace: 'counter',
19 | // 初始化state
20 | state: {
21 | count: 0,
22 | },
23 | // reducers 同步更新 类似于vuex的mutations
24 | reducers: {
25 | add(state, action) {
26 | return {
27 | ...state,
28 | count: state.count + 1
29 | }
30 | },
31 | },
32 | // reducers 异步更新 类似于vuex的actions
33 | effects: {
34 | someEffect(action, { dispatch }) {
35 | setTimeout(() => {
36 | dispatch({
37 | type: "counter/add"
38 | })
39 | }, 2000)
40 | return
41 | }
42 | }
43 | }
44 | ```
45 | **models/index**
46 | ```
47 | import reduxToVuex from 'redux-to-vuex'
48 | import { createStore, applyMiddleware, combineReducers } from 'redux'
49 | import { createLogger } from 'redux-logger'
50 |
51 | //model
52 | import counter from './counter'
53 |
54 | const reduxTree = reduxToVuex({
55 | counter
56 | })
57 |
58 | const middlewares = [
59 | reduxTree.effectMiddler,
60 | createLogger()
61 | ]
62 | const store = createStore(combineReducers(reduxTree.reducers), applyMiddleware(...middlewares))
63 | export default store
64 | ```
65 |
66 | 你的mian.js就想引入普通的store一样
67 | ```
68 | import React from 'react';
69 | import ReactDOM from 'react-dom';
70 | import './index.css';
71 | import App from './App';
72 | import { Provider } from 'react-redux'
73 | import store from "./models"
74 |
75 | ReactDOM.render(
76 |
77 | , document.getElementById('root'));
78 | ```
79 | 在使用它的组件中如同使用redux一样
80 | ```
81 | import React, { Component } from 'react';
82 | import { connect } from 'react-redux'
83 | import './App.css';
84 |
85 | class App extends Component {
86 | add = () => {
87 | const { dispatch } = this.props;
88 | dispatch({
89 | type: "counter/add",
90 | payload: "参数"
91 | })
92 | }
93 | dec = () => {
94 | const { dispatch } = this.props;
95 | dispatch({
96 | type: "counter/minus",
97 | payload: "参数"
98 | })
99 | }
100 | asyncAdd = () => {
101 | const { dispatch } = this.props;
102 | dispatch({
103 | type: "counter/someEffect",
104 | payload: "参数"
105 | })
106 | }
107 | render() {
108 | return (
109 |
110 |
111 |
112 |
113 |
114 |
{this.props.count}
115 |
116 |
30 |
31 |
32 |
33 |
34 |
{this.props.count}
35 |
36 |