资讯专栏INFORMATION COLUMN

一个Time TodoList实例了解redux在wepy中的使用

JackJiang / 1250人阅读

摘要:描述了如何把转变成下一个。唯一的要点是当变化时需要返回全新的对象,而不是修改传入的参数。以上是纯的使用,使用起来比较鸡肋,大量被使用在项目中,封装库提供的和可以将和完美结合,使用非常方便。

@subject: wepy-redux-time-todo
@author: leinov
@date:2018-10-30

wepy-redux-time-todo

Use github地址
git clone git@github.com:leinov/wepy-redux-time-todo.git

npm install

npm run dev

添加到微信开发者工具里即可运行

Wiki 创建项目

wepy是腾讯自出的一套小程序框架,基于Vue写法,也可以灵活使用第三方库,对原生的api也做了部分优化,提高了整体代码的可读性和可维护性,也极大的提高了开发效率,极力推荐使用。首先需要安装wepy命令,通过命令创建wepy项目,在执行下面第二句命令过程中会有一些问题,在到是否使用redux的问题时选y,在创建时就会加入redux依赖以及store文件夹

npm install wepy-cli -g //安装全局wepy命令

wepy init standard wepy-redux-time-todo // 创建wepy-redux-time-todo项目
项目结构

执行创建命令后会出现类似以下结构的项目结构(下面是我自己创建文件后的)

 |-- dist // 编译后执行文件夹
 |-- node_modules
 |-- src // 开发文件夹
 |   |-- components //组件
        |-- sec-title.wpy
     |-- pages //业务页面
        |-- index.wpy
     |-- store // redux
        |-- actions
            |-- index.js
        |-- reducers
            |-- timeReducer.js
            |-- index.js //合并reducer
        |-- types
            |-- index.js
     |-- style //样式
        |-- weui.scss
     |-- app.wpy //入口
 |-- package.json
Redux概念以及使用

Redux主要的作用是管理复杂的数据,多用于操作单页应用中的复杂状态,将整个应用的状态集中放在一个容器里统一管理。作为一个状态容器,他就像一个盒子(store),这个唯一的盒子(整个应用只有一个store)里有很多状态(state), 都以一个对象树的形式储存在store 中。 唯一能改变 state 的办法是触发 action,action是一个简单的对象,用来描述你想要干什么。reducer是一个纯函数来根据action返回的type操作状态变化返回新状态,reducer作为createStore参数返回最新的store,下面我们通过redux官网的代码具体描述redux的执行过程,

Action

action可以理解为动作,用户希望干什么,比如点击一个按钮让页面的数字加1,切换日期,插入数组等,总之是一个希望页面状态发生改变的行为标识。action用一个对象表示,包含一个必须属性type

{type:"INCREMENT"} //表示添加动作
{type:"DECREMENT"} //表示减法动作
{type:"GET_DATA",payload:{}} // 表示获取数据动作并挂载一个数据在payload属性上供reducer使用,多用于异步获取数据,也可以用自己的添加其他属性
Reducer

reducer是一个形式为 (state, action) => state 的纯函数(纯函数概念:不依赖外部环境变量,只依赖内部参数、不会产生副作用、相同的输入确保相同的输出)。描述了 action 如何把 state 转变成下一个 state。state 的形式取决于你自己,可以是基本类型、数组、对象、甚至是 Immutable.js 生成的数据结构。唯一的要点是当 state 变化时需要返回全新的对象,而不是修改传入的参数。
下面例子使用 switch 语句和字符串来做判断,也可以用自己的方式。

function reducer(state = 0, action) {
  switch (action.type) {
  case "INCREMENT":
    return state + 1;
  case "DECREMENT":
    return state - 1;
  default:
    return state;
  }
}
store

redux的createStore方法用于创建应用唯一的store,createStore方法的参数即reducer,用于更新store内state树,通过以下创建就可以把一个初始的{state:0}的这样一个状态存入到store中

import { createStore } from "redux";

const store = createStore(reducer);

store有几个重要的方法

store.dispatch(action) //派发事件 表示要干什么

store.getState() // 获取存储在store里的所有状态(数据)

store.subscribe(listener) //手动监听状态变化

dispatch改变状态

store.dispatch是改变状态的唯一方式,dispatch接受一个action参数(做什么),通知reducer需要做出什么样的改变,再更新整个store

store.dispatch({INCREMENT:"INCREMENT"}) 

这个操作会告诉reducer 当前需要给state做加1操作,

获取state
store.getState() // {state:1}
subscribe监听
store.subscribe(() =>
  console.log(store.getState())
);

在dispatch触发状态更新后需要通过subscribe监听才能获得最新的状态,如果在react中使用则需要把视图渲染函数放在监听函数内。

import store from "./redux.js"
store.subscribe(()=>{
  ReactDOM.render(, document.getElementById("root"))
});
以上是纯redux的使用,使用起来比较鸡肋,redux大量被使用在react项目中,封装库react-redux提供的Provider和connect可以将react和redux完美结合,使用非常方便。
Redux在wepy中的使用

通过上面的描述应该对redux有了一定的了解,接下来我们看下redux在小程序框架wepy中如何使用,wepy中需要安装wepy-redux依赖,类似react-redux,store文件夹下放redux的操作代码,redux的使用方法都相同,这里我们讲下与react使用不一样的地方

初始化store

首先需要在app.wpy中初始化store

import { setStore } from "wepy-redux"
import configStore from "./store"

const store = configStore()
setStore(store)

wepy中app.wpy编译后为原生小程序中的app.js,app.js在小程序整个执行生命周期里处于最前端,在小程序初始化时来创建store,这样在所有页面都可以使用,等同于react里的Provider

redux-actions

这里使用redux-actions库来优化reducer里的switch写法。

import { handleActions } from "redux-actions";
import {
    TIME_CONFIG_DATA, // 学员
} from "../types/index";

export default handleActions({
    [TIME_CONFIG_DATA](state, action) {
        return {
            ...state,
            timeConfigData: action.newData
        };
    }
}, {
    timeConfigData:[], //state初始值 
});
connect连接到wepy组件上

connect(states, actions) connect有两个参数,states是整个应用的状态,页面需要使用哪个状态对应获取该状态即可,actions业务操作,是wepy-redux对action的封装,这里我们不用这种方式,自己在action中手动dispatch,如果想要了解详细使用可参考wepy-redux

import { connect } from "wepy-redux"
 @connect({
    timeConfigData(state) {
      return state.timeReducer.num
    }
  })
  export default class Index extends wepy.page {
      // ...
    methods = {
      // ...
    }
    // ...
    onLoad() {
    }
  }

使用数据

其他方法都与在react中使用相同,通过上面的配置就可以在wepy中使用redux了,详细代码参考code

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98851.html

相关文章

  • redux —— 入门实例 TodoList

    摘要:入门实例前端技术真是日新月异,搞完不搭配个数据流都不好意思了。关于的用法,这只是基础入门的部分,还有的多的搞基操作,比如异步数据流和配合。 redux —— 入门实例 TodoListshowImg(https://segmentfault.com/img/bVtSeH); Tip 前端技术真是日新月异,搞完 React 不搭配个数据流都不好意思了。满怀期待的心去翻了翻 flux,简直...

    SKYZACK 评论0 收藏0
  • wepy框架开发小程序文档

    摘要:目录项目构建文件使用优化之处组件通信的使用注意事项报错记录踩坑记录项目构建官方文档地址链接项目源码地址链接项目资料地址链接简单介绍是一个微信小程序框架,支持模块化开发,开发风格类似。使用的方式请求小程序原生都将化。 目录 wepy项目构建 wepy文件使用 wepy优化之处 wepy组件通信 wepy的API使用 wepy注意事项 wepy报错记录 wepy踩坑记录 1. wep...

    Luosunce 评论0 收藏0
  • 和我一起入坑-React-Native-加入ReduxTodoList

    摘要:之前写了一篇没有加入的的小博文。一拆分结构根据自己的习惯和固定套路,拆分目录结构和组件结构。把的导航组件集中放在纯粹是个人习惯。二代码实现入口文件是用来做的数据持久化。添加事项后要通知其他组件更新数据。 读前须知 这个项目是第一次使用Redux的实例,并不具有专业性的理论知识。纯粹分享一次开发过程与心得。之前写了一篇没有加入Redux的React Native ToDoList的小博文...

    LucasTwilight 评论0 收藏0
  • todolist for react redux 学习总结

    摘要:为了提高自己的学习效率,避免做一些无用的工作,我也决定以后无论是工作还是学习一定要养成定时总结的习惯,而且也要用文字记录下来,这样可以时常复习,理清逻辑,加深印象。一种解决方法是将对象作为参数,传入容器组件。 前言 最近一直在学习react技术栈,相关的理论和概念基本都了解了,之前也用reactjs写了几个demo,切身体会到了函数式编程和组件化开发的强大之处,但因各种主客观原因,事后...

    anquan 评论0 收藏0

发表评论

0条评论

JackJiang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<