redux状态管理和react的结合使用

1:Redux

Redux 是 JavaScript 状态容器,专注于状态管理的库

整体来说是单一状态。就是指的是单向的数据流

应用中所有的 state 都储存在 store 中。 惟一改变 state 的办法是dispatch触发 action,为了描述 action 如何改变 state ,需要编写 reducer。

redux中最重要的几个:store     state     action    reducer

首先安装redux   安装:http://www.cnblogs.com/kelly2017/p/7930681.html

package.json中有

react-redux把状态映射到子组件 分发reducer

redux  创建reducer action store等   

react-thunk  thunk处理发送请求异步。

import { createStore } from ‘redux‘;
//新建一个store
//通过reducer来建立,是个形式为 (state, action) => state 的纯函数。
//reducer描述了 action 如何把老的状态state和action 生成新的状态state
// action有type
function  couter(state=0, action) {
    switch (action.type){
        case ‘加‘:
            return state+1
        case ‘减‘:
            return state-1
        default:
        return 1
    }
}
const store=createStore( couter )
//1: 创建 Redux store 来存放应用的状态(根据reducer来创建)
// store  应用中所有的 state 都储存在一个单一的 store 中。
const init=store.getState()
//store.getState()随时获取最新的状态
console.log(init)
//派发事件
//需要状态变更的时候 store.dispatch(action)来提交状态变更
//改变内部 state 惟一方法是 dispatch 一个 action。
store.dispatch({type:‘加‘})
//console.log(store.getState())
store.dispatch({type:‘加‘})
//console.log(store.getState())
store.dispatch({type:‘减‘})
//console.log(store.getState)
function listener() {
    const current=store.getState()
    console.log(`现在的总数是${current}`)
}
store.subscribe(listener)
//subscribe 订阅事件
//store.subscribe来监听每次state修改
//每次dispatch都会执行listener

运行结果:

2:Redux和React

redux和react一起结合使用的方法:

1)
因为改变内部 state 惟一方法是 dispatch 一个 action。
所以把store.dispatch的方法传递给组件,使其内部可以调用修改状态
react的修改状态从之前的setState({})变成了由store来统一管理
2)
store.subscribe来监听每次state修改
每次dispatch都会执行订阅的事件
subscribe来定义render函数,每次修改都重新渲染页面。
3)
react和redux的文件分离

index.js中 创建store

订阅subscribe只要状态改变。就重新渲染页面 render()

const store=createStore(couter)

新建store.以组件属性的形式。添加到component组件里

通过subscribe订阅这个render函数,状态有变化。render就会重新渲染页面

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import { createStore } from ‘redux‘;
import App from ‘./App‘;
import { couter,addFn,minusFn } from ‘./index.redux‘;
import registerServiceWorker from ‘./registerServiceWorker‘;
const  store=createStore(couter)
function render() {
    ReactDOM.render(<App store={store} addFn={addFn} minusFn={minusFn}/>, document.getElementById(‘root‘));
}
render()
store.subscribe(render)
registerServiceWorker();

  

新建index.redux.js专门管理redux

存放reducer和 dispatch的action   //store.dispatch({type:‘加‘});

//通过reducer来建立。
const ADD="加";
const MINUS="减";
export function  couter(state=0, action) {
    switch (action.type){
        case ADD:
            return state+1
        case MINUS:
            return state-1
        default:
            return 1
    }
}
//store.dispatch({type:‘加‘});store.dispatch({type:‘减‘})
//action
export function addFn() {
    return { type:ADD }
}
export function minusFn() {
    return { type:MINUS }
}

 

app.js中使用

内部通过属性获取store以及相应的函数

const store=this.props.store

点击的时候要改变状态 dispatch     //addFn() 执行返回的是对象

import React, { Component } from ‘react‘;
class App extends Component {
    constructor(props){
        super(props)
    }
  render() {
   const store=this.props.store
   const addFn=this.props.addFn
   const minusFn=this.props.minusFn
   const init=store.getState()
    return (
      <div className="App">
          <h1>你好吗?</h1>
          <p>现在的总数是:{init}</p>
          <button onClick={ ()=>store.dispatch( addFn() ) }>加1</button>
          <button onClick={ ()=>store.dispatch( minusFn() ) }>减1</button>
      </div>
    );
  }
}
export default App;

  

运行结果能实现简单的通过redux管理状态:

3:处理异步

redux默认情况下只处理同步,想要处理异步,需要上面安装的redux-thunk中间件

使用applyMiddleware开启中间件

action可以返回函数,使用dispatch提交action

 

 

  

时间: 2024-10-07 22:03:49

redux状态管理和react的结合使用的相关文章

Redux管理你的React应用

使用Redux管理你的React应用 因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew-sun/blog/issues/18) ,我会在这里进行持续的更新和纠错. React是最好的前端库,因为其发源于世界上最好的后端语言框架. ---信仰 4.0 will likely be the last major release. Use Redux

react+redux状态管理实现排序 合并多个reducer文件

这个demo只有一个reducer 所以合并reducer这个demo用不到 ,但是我写出来这样大家以后可以用到,很好用,管理多个reducer,因为只要用到redux就不会只有一个reducer所以这个合并reducer很好用. 需要的技术:react-redux    redux实现状态管理 装饰器:transform-decorators-legacy下载 第一步下载transform-decorators-legacy npm install transform-decorators-l

Redux状态管理方法与实例

状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http://cn.redux.js.org/index.html 前言 虽然官方文档上说只需几分钟就能上手 Redux,但是我个人认为即便你看个两三天也可能上手不了,因为文档里面的知识点不仅数量较多,而且还艰涩难懂,不结合一些实例来看很难用于实际项目中去. 但是不要担心自己学不会,这不我就给大家带来了这篇干

使用Redux管理你的React应用

React是最好的前端库,因为其发源于世界上最好的后端语言框架. ---信仰 4.0 will likely be the last major release. Use Redux instead. It's really great. —Flummox框架作者 acdliteAndrew Clark 为什么使用React还需要使用别的框架来搭配? React的核心是使用组件定义界面的表现,是一个View层的前端库,那么在使用React的时候我们通常还需要一套机制去管理组件与组件之间,组件与数

redux 介绍及配合 react开发

前言 本文是 Redux 及 Redux 配合 React 开发的教程,主要翻译自 Leveling Up with React: Redux,并参考了 Redux 的文档及一些博文,相对译文原文内容有增减修改. 目录 前言 目录 什么是 Redux,为什么使用 Redux Redux 的三大基本原则 1.唯一数据源 2.State 是只读的 3.使用纯函数来执行修改 第一个 Redux Store 不要改变原 State , 复制它 复合 Reducer Dispatch 之后哪个 Reduc

react+webpack+redux+router+ant 构架react开发环境(1)

需要安装的软件 node.js npm 推荐使用使用[email protected]以上的版本,因为6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm,因为伟大的墙,所以介意大家更换镜像, 安装完毕之后,打开终端(mac)window电脑因该是cmd,输入命令 node -v 会看到当前的node版本号, 就说明安装成功了,可以下面的步骤了. 构建项目 新建一个文件夹 使用webstorm编辑该文件夹,之后打开控制台,输入  npm init 来生成一个 package.json

React+Redux学习笔记:React+Redux简易开发步骤

前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文章:Redux学习笔记:Redux简易开发步骤 而React+Redux是以上两部分结合起来,方便在React中使用Redux,专用库为React-Redux.js.React-Redux.js新增了一些新方法: Provider:容器跟组件,可直接把外部的state传递给所有子组件和UI组件: m

nextjs的开发使用(二)---引入redux状态管理

在上篇文章中,基于react的nextjs服务端渲染框架学习使用 学习了解了一些关于nextjs的东西,并做了一个小demo,这篇文章将对上篇文章做一个补充,在nextjs中引入redux 安装 // 安装redux相关依赖 yarn add redux redux-saga react-redux // 安装next.js对于redux的封装依赖包 yarn add next-redux-wrapper next-redux-saga yarn add redux react-redux 创建

Vue.js 系列教程 1:渲染,指令,事件

原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说"它如此合乎常理"或者"它提供给我需要的工具,而且没有妨碍我的工作".每当学习 Vue 的时候,我都很高兴,因为很有意义,而且很优雅. 以上是我对 Vue 的介绍.在我第一次学习 Vue 的时候,我就想要这样的文章.如果你倾向于无党派的方法,请查阅 Vue 简单易懂的 用户指南. 系列文章: 渲染, 指令,