文档章节

react从入门到放弃 之 redux

 激进黄瓜酱
发布于 2016/06/19 02:44
字数 1300
阅读 138
收藏 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://blog.csdn.net/u014744118/article/details/82120657 React和Redux是相互独立的两个框架。 一、React React 是一个采用声明式...

CoolSummmer
2018/08/27
0
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
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 学习指南 (Lean React)

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

陈学家
2016/05/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

产品分析感悟

我终于写完了我的第一份产品分析,按理说,内心应该很高兴才对,但是并没有,我此刻心情很沉重。 好吧,我全交代。。。 在这写篇文章之前,我仿佛打了鸡血般,以为自己打开了新的知识大门,我...

铸剑为犁413
7分钟前
1
0
如何使用less实现随机下雪动画详解

冬天来了,设计师说摇摇乐的场景需要随机下落的雪花动画,第一时间就想到的方法是canvas比较好,项目非常紧急,然而小程序对canvas支持不够友好,容易在项目中出现无法预估的兼容性问题 ,马...

前端小攻略
14分钟前
0
0
一个程序员的成长之路(转)

转自全民直播CTO张云龙讲述的一个程序员的成长之路,觉得有一定的借鉴性,分享一下。 https://github.com/fouber/blog/issues/41

酷沃
14分钟前
1
0
https

进入阿里云域名后台,修改DNS为阿里云官方DNS(默认为官方),然后点击“免费开启SSL证书” 点击“申请”、“验证”并等待签发 然后根据自己的服务器类型下载对应的证书 我使用的是lnmpa工具...

临江仙卜算子
40分钟前
0
0
Quartz监听器Listerner

概述 Quartz的监听器用于当任务调度中你所关注事件发生时,能够及时获取这一事件的通知。Quartz监听器主要有JobListener、TriggerListener、SchedulerListener三种,顾名思义,分别表示任务、...

大笨象会跳舞吧
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部