react学习一篇就够了 (5)

store/action/

index.js ====== /* * 合并所有的action-creator,类似于reducer合并,为了防止冲突,合并后的对象是以版块名称单独划分管理 * */ import vote from './vote'; import personal from './personal'; let action ={ vote, personal }; export default action; personal.js ====== import * as TYPE from '../action-types'; let personal = {}; export default personal; vote.js ====== /* * 每个版块单独的action-creator :就是把dispatch派发时候需要传递的action对象进一步统一封装处理 * react-redux中会体验到他的好处 * */ import * as TYPE from '../action-types'; let vote={ support(){ //dispatch 派发的时候需要传递啥就返回啥即可 return { type: TYPE.vote_support }; }, against(){ return { type: TYPE.vote_against } } }; export default vote;

store/reducer

index.js ===== /* * 把每一个模块但是设置的reducer函数最后合并成为总的reducer * 为了保证合并reducer过程中,每个模块管理的状态信息不会相互冲突 * redux在合并的时候容器中的状态进行分开管理(一合并reducer时候设置的属性名作为状态 * 划分的属性名,把各个版块管理的状态放到自己的属性下 * state={ * vote:{ n:0, m:0 * }, * personal:{ * baseInfo:{} * } * } * store.get-state().vote.n以后获取状态信息的时候,也需要把vote加上 * */ import {combineReducers} from 'redux'; import vote from './vote'; import personal from './personal'; let reducer=combineReducers({ vote, personal }); export default reducer; personal.js ====== import * as TYPE from '../action-types'; export default function vote(state = { baseInfo:{} }, action) { //... return state; } vote.js ===== //vote版块的reducer // state: 原始redux管理的状态管理(设置初始值) // action: dispatch派发的时候传递的行为对象(type,) import * as TYPE from '../action-types'; //把模块中所有导出的内容全部导出,并重新命名为type export default function vote(state = { n: 0, m: 0, }, action) { switch (action.type) { case TYPE.vote_support: state = {...state, n: state.n + 1}; break; case TYPE.vote_against: state = {...state, m: state.m + 1}; break; } return state; }

src/index.js

import React from 'react'; import ReactDOM from 'react-dom'; import 'bootstrap/dist/css/bootstrap.css' import Vote from './component/Vote/Vote'; import store from './store'; ReactDOM.render(<main> <Vote title={'英格兰对战巴拿马,合力必胜'} count={{ n: 100, m: 78 }} store={store}/> </main>, document.querySelector('#root'));

component/Vote

Vote.js ===== render() { let {store} = this.props; return <section className={'panel-heading'} style={{width: '50%', height: '20px auto'}}> <VoteHead title={this.props.title}/> <VoteBody store={store}/> <VoteFooter store={store}/> </section> } VoteBody.js ===== import React from 'react'; import PropTypes from 'prop-types'; export default class VoteBody extends React.Component { constructor(props) { super(props); //init state let {n, m} = this.props.store.getState().vote; this.state = {n, m}; } componentDidMount() { this.props.store.subscribe(() => { let {n, m} = this.props.store.getState().vote; this.setState({ n, m }) }); //unsubscribe(): 当前追加的方法移出,接触绑定的方式 } render() { let {n, m} = this.state, rate = (n / (n + m)) * 100; if (isNaN(rate)) { rate = 0; } return <div className={'panel-body'}> 支持人数: <span>{n}</span> <br/> 反对人数: <span>{m}</span> <br/> 支持比率: <span>{rate.toFixed(2) + '%'}</span> </div>; } } VoteFooter.js ===== import React from 'react'; import PropTypes from 'prop-types'; import action from '../../store/action'; export default class VoteFooter extends React.Component { constructor(props, context) { super(props, context); } render() { let {store: {dispatch}} = this.props; return <div className={'panel-footer'}> <button className={'btn btn-success'} onClick={() => { this.props.store.dispatch(action.vote.support()) }} >支持 </button> &nbsp;&nbsp; <button className={'btn btn-danger'} onClick={ () => { this.props.store.dispatch(action.vote.against()) } }>反对 </button> </div> } } react-redux

react-redux 是把redux进一步封装,适配react项目,让redux操作更简洁,store文件夹中内容和redux一模一样

在组件调取使用的时候可以优化一些步骤

Provider 根组件

当前整个项目都在Provider组件下,作用就是把创建的store可以供内部组件使用(基于上下文)

Provider 组件中只允许出现一个组件

把创建的store基于属性传递给Provider(这样后代组件中都可以使用这个store)

connect 高阶组件

相对传统的redux,我们做的步骤优化

导出的不在是我们创建的组件,而是基于connect构造后的高阶组件

```js export default connect([mapStateToProps],[mapDispatchToProps])(自己创建的组件) ```

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfxfs.html