欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

初步了解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'));

现在页面正常是可以显示出来的,但是在控制台内会有两个报错,这个我们先不用管

初步了解redux

接下来回到我们的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有一个初步的了解,以上内容有什么不足或者错误的地方,欢迎大家提出。