文档章节

react从入门到放弃 之 redux

 激进黄瓜酱
发布于 2016/06/19 02:44
字数 1300
阅读 135
收藏 1

redux 是干嘛的?

因为react项目视图嵌套,有时候嵌套太深,那么数据的管理就会非常复杂。 redux是一套非常有效的 用于集中管理你认为应该被他管理的组件的state的集中地。 redux可以用简单的代码 在任何组件直接拿到redux管理的数据 并且进行操作(action)

一些废话

本文是个人学习的笔记 使用概念上的一些看法 并不是标准的教条、教程,放在网上仅供各位交流参考 redux中文文档地址

demo

demo效果图

git 地址: https://git.oschina.net/huanggua/react-redux-demo.git

安装:npm install 运行:npm run dev

环境

"redux": "^3.5.2"  //redux 本体
"react-redux": "^4.4.5"  // 结合react的
"redux-logger": "^2.6.1" //打印action
"redux-thunk": "^2.1.0" //redux 异步
"isomorphic-fetch": "^2.2.1" //进行网络请求的 也可以用jq的ajax 随意

redux一些概念

  • action: 描述请求的 发送一个请求 去修改redux管理的state 从而达到数据控制组件的功能
  • reducer:根据action类型 传入的参数 进行分流 对 redux的state(store)增删改

redux 同步数据 具体代码

运行顺序 jsx组件 调用 action 传到 reducer 修改数据 重新渲染组件

==========index or main 、 app 入口文件配置===============

//index or main 、 app  入口文件配置

import { createStore, applyMiddleware } from 'redux';  // 创建 redux的store 和 配置 中间件
import thunk from 'redux-thunk'; //  中间件 用于 异步加载
import createLogger from 'redux-logger' // 打印 action
import { Provider } from 'react-redux';
import reducer from './reducers/reducer.js';

const loggerMiddleware = createLogger()

let store = createStore(  //  坑:这里的参数一定要注意顺序
  reducer,  //  你的reducer 文件
  window.devToolsExtension && window.devToolsExtension(),  //redux  浏览器插件  在Chrome 浏览器  搜索 redux 插件 安装
    applyMiddleware(  //配置redux中间件
    thunk,   //允许action 返回function  并运行function  function内可以调用dispatch 用于异步加载  链接服务器用
    loggerMiddleware  //在控制台打印 action
  )
)

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

=============action的配置========================

//action的配置

//定义action的类型
/** 电影页面 数据操作*/
export const MOVIE_INIT = 'MOVIE_INIT'; //初始化电影
export const MOVIE_ADD = 'MOVIE_ADD_MOVIE'; //新增电影
export const MOVIE_UPDATA = 'MOVIE_UPDATA'; //修改电影
export const MOVIE_REMO = 'MOVIE_REMO'; //删除电影

//定义action方法 定义传入的变量  最终返回 action的type 和 调用action时传入的变量
export function initMovie(initData) {
    return { type: MOVIE_INIT, initData }
}
//新增电影
export function addMovie(form) {
    return { type: MOVIE_ADD, form }
}

//修改电影
export function updataMovie(form) {
    return { type: MOVIE_UPDATA, form }
}
.........

===============reducer 的配置=======================

//reducer 的配置
import { combineReducers } from 'redux'
import { MOVIE_ADD, MOVIE_UPDATA, MOVIE_REMO, MOVIE_INIT , MOVIE_LOAD} from '../actions/actions.js'  //action类型
import * as doMovieData from '../dataCentre/movies/movieData.js';  //自定义的 处理数据的文件

// 电影页面 处理数据  state参数就是 movieData 指向的数据  action里包含了传进来的数据
function movieData(state = {load:false}, action) {
    switch (action.type) {
        case MOVIE_INIT:
  //这里有个大坑:return的 是一个新的state对象 不要在原有对象基础上 进行修改 要全新的 
            return doMovieData.data_init(state, action);
        case MOVIE_ADD:
            return doMovieData.data_add(state, action);
        case MOVIE_UPDATA:
            return doMovieData.data_updata(state, action);
        case MOVIE_REMO:
            return doMovieData.data_remo(state, action);
        case MOVIE_LOAD:
            return doMovieData.data_load(state, action);
        default:
            return state
    }
}

//可以写多个function   我建议根据路由 每个页面写一个function  一个function管理一个页面
// 注意 如果多个function  action的type写的一样的话  两个function 相同的case 都会执行的

const reducer = combineReducers({
    movieData
    //多个function 可以在这里继续
})

export default reducer

==============jsx 容器组件 如何使用redux===================

//jsx 容器组件 如何使用redux
import { connect } from 'react-redux'
import * as movieAction from '../../actions/actions.js'
class MovieIndex extends Component {
........
    //1.初始化数据 2.页面切换 刷新数据
    componentWillMount(){
        let { dispatch } = this.props;
        dispatch(movieAction.getInitData());
    }

    render() {
           <MovieTable
                    data={this.props.movieData.data}
                    />
    }
.....
function select(state) {
    return {
        movieData: state.movieData  //这里的state 就是 redux 管理的 数据state  movieData 就是reducer的一个function
    };
}

export default connect(select)(MovieIndex); //jsx组件交给 redux处理 把 redux的东西注入
}

组件通过注入的dispatch 调用action action里有传入的参数 与类型 reducer根据action去改变state 但是 这样只是同步数据 我也不懂什么是同步数据 但是我发现我在reducer 如果使用ajax的话 方法是不等ajax的请求延迟的 会直接跳过ajax 等ajax执行了 拿到数据 return redux的数据也不会变更 所以我们要用异步加载了!

redux 异步数据

我们之前已经 在入口文件处 配置过异步加载需要的东西了 写法上有变化的 只有action文件了 或者就是action的写法 我们可以在action里调用dispatch 哈哈 你只需要 在action 返回一个函数 return (dispatch, getState)=> {}

//初始化电影
export function getInitData(initData) {

    return (dispatch, getState) => {
        //应用场景:我们需要请求数据的时候 我们要先通知 组件进入加载了  改变redux控制加载的组件显示  请求拿到数据之后  通知加载关闭 并把数据合并到redux
//fetch 是新的 网络请求的api 使用要 import fetch from 'isomorphic-fetch';
        //首先让load组件 显示
        dispatch(updataLoad());

        setTimeout(function () {  //预设个定时器 模拟网络延迟
            fetch('./test.json')
                .then(
                function (response) {
                    if (response.status !== 200) {
                        console.log('当前状态码为: ' + response.status);
                        return null;   //测试不存在这种情况 先不管
                    }

                    response.json().then(function (data) {
                        // 把数据存入 state
                        //成功之后 load不显示

                        dispatch(initMovie(data));
                        dispatch(updataLoad());

                    });
                }
                )
                .catch(function (err) {
                    console.log('Fetch Error :-S', err);
                });
        }, 2000)

    }
    // return { type: MOVIE_INIT, initData }
}

© 著作权归作者所有

共有 人打赏支持
粉丝 2
博文 11
码字总数 5088
作品 0
洛阳
私信 提问
react学习资源汇总

react-tutorial a tutorial react collection and sort,let you easily get started and organized 主要是搜集整理生态从入门到深入的教程、工具和自己做的demo,以便日后查阅 :blush: 设计思...

逆蝶_Snow
2016/12/01
298
0
React+Redux系列教程

参考项目:https://github.com/lewis617/react-redux-tutorial 参考项目下载地址:https://github.com/lewis617/react-redux-tutorial.git React+Redux系列教程 react+redux教程(一)conne......

王春-海子
2016/08/20
107
0
精益 React 学习指南 (Lean React)

本书内容 这本书我会由简单到复杂的带领大家进入 React 的世界, 其中 1 - 3 章节都是 React 的基础知识,需要提醒读者的是大多数的基础知识都可以通过 React 的官方文档学习,如果对英语敏感...

陈学家
2016/05/25
0
0
iOS开发者React Native学习路线

http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS-developer/ 既然是写给iOS开发者的,那么我默认你已经掌握iOS原生应用开发的基本知识,所以对iOS原生开发的相关内容不做解...

卡奇匠
2016/12/13
18
0
通过一个计数器来了解react-redux及其用法

react之前在看看的时候工作过,后面到了TX就一直使用vue,react被忘得一干二净,这几天下了一个决心,想把react文档从头到尾重新看一遍,结果发现东西实在是太多了。react,redux,react-red...

刘源泉
08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MySQL Replication 梳理详解

MySQL Replication 1 MySQL5.5以前的复制 异步、SQL线程串行化回放 MySQL内建的复制功能是构建大型,高性能应用程序的基础。主服务器将更新写入二进制日志文件,从服务器重新执行一遍来实现的...

PeakFang-BOK
17分钟前
1
0
.NET Core & ConsoleApp & appsettings.json

准备 Visual Studio 2017 .NET Core 2.1 新建控制台应用(.NET Core) 默认的 Program.cs // Program.csusing System;namespace ConsoleApp1{ class Program { static voi......

taadis
27分钟前
1
0
结合lucene谈谈日期的压缩问题

说起日期值的压缩,一般容易想到的办法是将日期转化成long类型,然后再通过变长整形进行压缩,我算了一下按照毫秒来算最多占用5个字节(可以通过“谈谈变长整型”中的表查看),确实节省了部...

FAT_mt
今天
1
0
导出私有函数与私有变量

在Go语言中, package中包含函数与变量通过identifier的首字母是否大写来决定它是否可以被其它package所访问。当一个函数或变量名称为小写字母时,默认是无法被其他package引用的. 有没有办法...

xtof
今天
1
0
new Date() 在Safari下的 Invalid Date问题

问题复现 var timeStr = '2018-11-11 00:00:00';var time = new Date(timeStr);// error: Invalid Date... 在safari浏览器下,time为Invalid Date, 导致后面代码执行错误; 其他浏览器诸...

会写代码的husky
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部