# weapp-redux-demo

**Repository Path**: Rattenking/weapp-redux-demo

## Basic Information

- **Project Name**: weapp-redux-demo
- **Description**: redux在微信小程序中的应用实例！
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-26
- **Last Updated**: 2022-11-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## weapp-redux 使用

### 1. 引入 weapp-redux 插件
1. 克隆 weapp-redux-demo 代码库
```
git clone https://gitee.com/Rattenking/weapp-redux-demo.git
```
2. 将项目文件夹下的 weapp-redux 拷贝到自己项目

### 2. 创建全局的 store
1. 在 weapp-redux 同级创建 store 文件夹
2. 在 store 文件夹下分别创建 actions, constants, reducers 文件夹

> constants 目录，用来放置所有的 action type 常量
> actions 目录，用来放置所有的 actions
> reducers 目录，用来放置所有的 reducers

3. 同时创建 index.js 文件为 store 的入口文件
4. 分别在 actions, constants, reducers 文件夹下创建 index.js 文件，作为操作的入口文件

### 3. 创建 store 入口
```
store/index.js

import { createStore, applyMiddleware } from '../weapp-redux/index'

import reducer from './reducers/index';

const store = createStore(reducer)
export default store;
```

### 4. 在项目入口文件 app.js 中使用 weapp-redux 中提供的 Provider 组件将创建好的 store 接入应用中
```
app.js

import store from './store/index'
import action from './store/actions/index'
import Provider from './weapp-redux/provider/index'
let { Page, Component } = Provider(store, action)
```

### 5. 开发一个简单的加、减计数器功能
1. 新增 action type
```
constants/actionTypes.js
---
// 数字操作命令
// 加
export const ADD = 'ADD';
// 减
export const MINUS = 'MINUS';
```

2. 新增 reducer 处理
```
reducers/numHandle.js

import {
  ADD,
  MINUS
} from '../constants/actionTypes'

const defaultState = {
  count: 0
}

export const numHandle = (state = defaultState, action) => {
  switch (action.type) {
    case ADD:
      return { ...state, count: state.count + 1 };
    case MINUS:
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}
```

```
reducers/index.js

import { combineReducers } from '../../weapp-redux/index';

import { numHandle } from './numHandle';

export default combineReducers({
  numHandle
})
```

3. 新增 action 处理
```
actions/numHandle.js

import store from '../index'

import { 
  ADD,
  MINUS
} from '../constants/actionTypes';

export function add(){
  store.dispatch({
    type: ADD
  })
}
export function minus(){
  store.dispatch({
    type: MINUS
  })
}
export function asyncAdd(){
  setTimeout(() => {
    add()
  }, 2000)
}
```

```
actions/index.js

import * as numHandle from './numHandle';

export default {
  numHandle
}
```
### 6. 计数器页面应用
1. 直接访问 this.$action 操作 count

```
pages/index/index.js

Page({
  storeTypes: ['numHandle'],
  data: {},
  add(){
    this.$action.numHandle.add();
  },
  minus(){
    this.$action.numHandle.minus();
  },
  asyncAdd(){
    this.$action.numHandle.asyncAdd();
  }
})
```


```
pages/index/index.wxml

<view class="container">
  <view>Hello, World!</view>
  <view>{{numHandle.count}}</view>
  <button catchtap="add">+</button>
  <button catchtap="minus">-</button>
  <button catchtap="asyncAdd">asyncAdd</button>
  <navigator url="../logs/logs">import 引入操作页</navigator>
  <navigator url="../actionType/index">actionTypes 引入操作页</navigator>
</view>
```

2. import 引入计数器操作方法
```
pages/logs/logs.js

import {
  add,
  minus,
  asyncAdd
} from '../../store/actions/numHandle';

Page({
  storeTypes: ['numHandle'],
  add,
  minus,
  asyncAdd
})
```

3. actionTypes 引入计数器操作方法
```
pages/actionType/index.js

Page({
  storeTypes: ['numHandle'],
  actionTypes: ['numHandle']
})
```
### 7. 总结
1. 第一种方法需要重新在对应页面创建对应的操作方法；
2. 第二种需要import引入对应的方法；
3. 第三种是将actions对应暴露的方法全部导入；
4. 请按照实际情况使用

### 8. 目前消耗性能需要优化
1. dispatch 的时候会将所有的订阅都执行一次，期望仅执行和更新相关的订阅；
2. 订阅的时候是将需要的全局状态一起 setData，期望仅更新发生变化的部分进行更新！

### 9. 如果有什么优化建议，请反馈！反馈QQ群：264303060
### 10. 预览