1. 如何在其他组件中使用redux呢？
根据React-Redux[上]中最后一个例子再进一步拓展，如何在子组件中使用redux呢？其实和在APP组件中基本是一模一样！
//about.js import React from 'react'; import store from '../store/store'; import {addAction, subAction} from '../store/action'; class About extends React.PureComponent{ constructor(props){ super(props); this.state = { count: store.getState().count } } componentDidMount() { store.subscribe(()=>{ this.setState({ count: store.getState().count }) }) } componentWillUnmount() { store.unsubscribe(); } render(){ return ( <div> <p>{this.state.count}</p> <button onClick={()=>{this.btnClick()}}>递减</button> </div> ) } btnClick(){ store.dispatch(subAction(1)); } } export default About;
// App.js import React from 'react'; import store from './store/store'; import {addAction, subAction} from './store/action'; import About from './components/About' class App extends React.PureComponent{ constructor(props){ super(props); this.state = { count: store.getState().count } } componentDidMount() { store.subscribe(()=>{ this.setState({ count: store.getState().count }) }) } componentWillUnmount() { store.unsubscribe(); } render(){ return ( <div> <p>{this.state.count}</p> <button onClick={()=>{this.btnClick()}}>增加</button> <About/> </div> ) } btnClick(){ store.dispatch(addAction(5)); } } export default App;
经过观察可以发现几个非常明显的问题：
- 当前使用Redux存在的问题
- 冗余代码太多, 每次使用都需要在构造函数中获取
每次使用都需要监听和取消监听 - 操作store的代码过于分散
- 如何解决冗余代码太多问题?
使用React-Redux,专门为react设计的redux库 - 什么是React-Redux
React-Redux是Redux官方的绑定库,能够让我们在组件中更好的读取和操作Redux保存的状态,官方地址：react-redux
可以点击链接安装react-redux
目录结构.png
//index.js import ReactDOM from 'react-dom'; import React from 'react'; import App from './App'; import { Provider } from 'react-redux' import store from './store/store'; ReactDOM.render( //在Provider中使用store属性接收store <Provider store={store}> <React.StrictMode> <App/> </React.StrictMode> </Provider> , document.getElementById('root'));
在需要使用store数据的文件中通过将store中存储的state和action映射到props中进行使用非常方便，看代码都少了很多呢？嘿嘿
import React from 'react'; import { connect } from 'react-redux' class Home extends React.PureComponent{ render(){ return ( <div> <p>{this.props.count}</p> <button onClick={()=>{this.props.increment()}}>递增</button> </div> ) } } // 在mapStateToProps方法中告诉React-Redux, 需要将store中保存的哪些数据映射到当前组件的props上 const mapStateToProps = (state)=>{ return { count: state.count } }; // 在mapDispatchToProps方法中告诉React-Redux, 需要将哪些派发的任务映射到当前组件的props上 const mapDispatchToProps = (dispatch) =>{ return { increment(){ dispatch(addAction(1)); } } }; //将当前组件和映射了redux中的数据的props相关联 export default connect(mapStateToProps, mapDispatchToProps)(Home);
connect实现原理
在home.js最后一步就是用的将当前组件和映射了redux中的数据的props相关联,但是当时看的时候觉得它的写法很奇怪，就忍不住多想了一下,为什么会有两个括号连在一起呢？难道这是一种新的语法……，不会吧，真的超级奇怪
但是细想一下，如果connect(args）返回的是一个函数，那么一切都说的通了，现在让小单来一步一步思考他是怎么实现的吧！
export default connect(mapStateToProps, mapDispatchToProps)(Home);
Step 01 从connect的作用出发，当前组件和映射了redux中的数据的props相关联
connect调用时传入了两个参数，那我们就模仿这他来一顿抄抄抄，结构不出所料的话应该就是：
function connect(mapStateToProps, mapDispatchToProps){ return( function(component){ return() } ); }
Step 02 高阶组件+数据映射
但是之后connect(mapStateToProps, mapDispatchToProps)(Home)返回的仍然是一个组件，这不就是高阶组件的定义吗？即：传入一个组件，返回一个组件：
并且需要把mapStateToProps和mapDispatchToProps映射到props中
function connect(mapStateToProps, mapDispatchToProps) { return function enhanceComponent(WrappedComponent) { class AdvComponent extends React.PureComponent{ constructor(props){ super(props); this.state = { storeState : {...mapStateToProps(store.getState())} } } render() { return (<WrappedComponent {...this.props} {...mapStateToProps(store.getState())} {...mapDispatchToProps(store.dispatch)}/>) } } return AdvComponent; } }
Step 03 解决组件自身数据不更新问题
原因：没有进行监听，所以当数据发生变化时没有更新，但是数据本身已经变化了，只是页面不更新，可以考虑使用react生命周期来注册和取消监听
//connect.js import ReactDOM from 'react-dom'; import React from 'react'; import store from '../store/store'; function connect(mapStateToProps, mapDispatchToProps) { return function enhanceComponent(WrappedComponent) { class AdvComponent extends React.PureComponent{ constructor(props){ super(props); this.state = { storeState : {...mapStateToProps(store.getState())} } } componentDidMount() { store.subscribe(()=>{ this.setState({ storeState: {...mapStateToProps(store.getState())} }) }) } componentWillUnmount() { store.unsubscribe(); } render() { return (<WrappedComponent {...this.props} {...mapStateToProps(store.getState())} {...mapDispatchToProps(store.dispatch)}/>) } } return AdvComponent; } } export default connect;
此时，将app.js中的import { connect } from 'react-redux'换成引入的自己编写的connect.js也是没有问题的，说明成功啦！！
import React from 'react'; // import { connect } from 'react-redux' import connect from '../connect/connect';
完结，睡觉！！！！
