react redux react-redux使用方式(一)

在react的项目中使用redux的基本用法

文件主要分四部分

  • type
  • reducer
  • action
  • 入口index

type文件

项目中不是必须有这个文件的存在,只是为了在大型项目中利于维护将各种type独立出来。
/** 文件示例*/
export const USER_NAME = 'USER_NAME';
export const USER_CODE = 'USER_CODE';

reducer文件

reducer是一个函数,接收action和当前state作为参数,配合action中的type对state的值进行更新
/** 文件示例*/
import { USER_NAME, USER_CODE } from '../type/module1';

const userInfo = {
    userName: '马云',
    userCode: 'my',
};

export function USER_INFO(state = userInfo, action) {
    switch (action.type) {
        case USER_NAME:
            return Object.assign({}, state, { userName: action.name });
        case USER_CODE:
            return Object.assign({}, state, { userCode: action.code });
        default:
            return state;
    }
}

action文件

action是改变state的唯一办法,action是一个对象其中type是必须的,其它参数可以自由设置(多数情况下这些参数就是更新state所需要的值)
/** 文件示例*/
export const USER_CODE_ACTION = (code) => {
    return {
        type: 'USER_CODE',
        code,
    }
};

export const USER_NAME_ACTION = (name) => {
    return {
        type: 'USER_NAME',
        name,
    }
};

入口文件

入口文件中重点是combineReducers这个辅助函数,他可以将多个reducer合并成最终的reducer,后续使用时可以对这个reducer调用createStore
/** 文件示例*/
import { combineReducers } from 'redux';
import reducer from './reducer';

const store = combineReducers({
    ...reducer
});
export default store;

下面是在组件中如何使用

在根组件中创建store

import state from './redux';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
const store = createStore(state); 

function App() {
    return (
        <Provider store={store}>
            <div className="App">
                <ComOne/>
                <ComTwo/>
            </div>
        </Provider>
    );
}

在组件中如何使用

import { connect } from 'react-redux';
// 引入action
import { USER_CODE_ACTION } from '../../redux/action/module1';

function ComOne(props) {
    const [ count, setCount ] = useState(0);
    return (
        <div className="ComOne">
            <div>{props.userCode}</div>
            <Button type='primary' onClick={ ()=>{props.USER_CODE_ACTION(Math.random())}}>提交</Button>
        </div>
    );
}

// mapStateToProps方法:将state中的变量合成到组件的props中
const mapStateToProps = (state) => { 
    return { 
        userCode: state.USER_INFO.userCode
    }
};
// mapDispatchToProps方法:将action合成到组件的props中,在组件中可以直接props.USER_CODE_ACTION()进行调用
const mapDispatchToProps = {
    USER_CODE_ACTION 
};
/** 
* connect api
* 首先connect之所以会成功,是因为Provider组件, 在原应用组件上包裹一层,使原来整个应用成为Provider的子组件,它真正连接 Redux 和 React
*/
export default connect(mapStateToProps, mapDispatchToProps)(ComOne);
2 声望
2 粉丝
0 条评论
推荐阅读
正则原理剖析
回溯法也称试探法,它的基本思想是:从问题的某一种状态(初始状态)出发,搜索从这种状态出发所能达到的所有“状态”,当一条路走到“尽头”的时候(不能再前进),再后退一步或若干步,从另一种可能“状态”出发,继...

闲人阅读 555

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan20阅读 1.6k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...

九旬13阅读 1.5k

封面图
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫16阅读 1.5k评论 2

封面图
2 声望
2 粉丝
宣传栏