初步了解redux
程序员文章站
2022-07-10 20:38:42
redux作为react的状态状态管理工具,是十分重要的一部分,但是它在学习起来比较困难。它的写法一共分为三部分,而且他不像其他的东西一样可以写一步,在页面上查看一下。它必须三个部分全部完成之后,才能查看效果,所以redux在报错的时候也是非常的头痛的,不好查找具体是在哪一步写错了内容。 下面简单的 ......
redux作为react的状态状态管理工具,是十分重要的一部分,但是它在学习起来比较困难。它的写法一共分为三部分,而且他不像其他的东西一样可以写一步,在页面上查看一下。它必须三个部分全部完成之后,才能查看效果,所以redux在报错的时候也是非常的头痛的,不好查找具体是在哪一步写错了内容。
下面简单的说一个我对它的一些了解和使用,给大家提供一些参考
好的,使用redux最开始的一步就是安装
npm i --save redux和npm i --save react-redux
安装完成之后,我们去修改index.js文件的内容,先导入provider
import {provider} from 'react-redux'
下一步
1 class index extends react.component{ 2 render() { 3 return ( 4 <react.fragment> 5 <provider> 6 <app/> 7 </provider> 8 </react.fragment> 9 ); 10 } 11 } 12 13 reactdom.render(<index />, document.getelementbyid('root'));
现在页面正常是可以显示出来的,但是在控制台内会有两个报错,这个我们先不用管
接下来回到我们的app.js页面写我们的内容,我们在页面上定义两个点击按钮,一个增值,一个减值
1 <div>计算器:{this.props.state.number}</div> 2 <button onclick={this.inccounter.bind(this)}>+</button> 3 <button onclick={this.deccounter.bind(this)}>-</button>
接下来定义一下点击事件,并且把这个方法传递给index.js页面的方法
1 constructor(){ 2 super() 3 this.iamount = 0 4 } 5 //将值传递给src/index.js里面的counter 6 //增值 7 inccounter(){ 8 this.props.dispatch({type:"inc",amount:++this.iamount}) 9 } 10 //减值 11 deccounter(){ 12 this.props.dispatch({type:"dec",amount:--this.iamount}) 13 }
现在那我们返回到index.js 写我们的方法
1 function counter(state={number:0},action) { 2 switch (action.type) { 3 case "inc": 4 return{number: action.amount} 5 case "dec": 6 return{number: action.amount} 7 default: 8 return state 9 } 10 }
现在我们的函数也定义完了,我们需要将它存放一下,我们在导入createstore和combinereducers
1 import {createstore,combinereducers} from 'redux'
然后
1 let reducer=combinereducers(//合并多个函数 2 { 3 counter:counter, 4 } 5 ) 6 const store=createstore(reducer); 7 class index extends react.component{ 8 render() { 9 return ( 10 <react.fragment> 11 <provider store={store}> 12 <app/> 13 </provider> 14 </react.fragment> 15 ); 16 } 17 }
好了现在我们基本差不多就要完成了,就剩下最后的一点现在我们返回到app.js导入一个connect以及变换一下导出组件的方法
1 import { connect } from 'react-redux'; 2 3 export default connect((state)=>{ 4 return { 5 state: state 6 } 7 })(app);
到目前为止,我们的这个功能也完成了,
希望大家通过以上内容对redux有一个初步的了解,以上内容有什么不足或者错误的地方,欢迎大家提出。
上一篇: 浅谈事件冒泡和事件捕获
下一篇: 将mssql数据库高版本迁移到低版本