当前位置: 技术文章>> 详细介绍react中的redux_counter应用_redux版本

文章标题:详细介绍react中的redux_counter应用_redux版本
  • 文章分类: 后端
  • 10790 阅读
文章标签: react javascript

Redux Counter是Redux的官方教程中的示例,用于展示如何使用Redux来管理一个计数器的状态。以下是对Redux Counter应用的介绍。

首先,我们需要安装redux库和react-redux库。这可以通过在终端中运行以下命令来完成:


npm install redux

npm install react-redux

接下来,我们需要定义一个reducer来处理计数器的状态。在这个例子中,我们定义了一个名为counter的reducer,它接收当前的state和action,并返回新的state。这个reducer的实现代码如下:


function counter(state = 0, action) {

switch (action.type) {

case 'INCREMENT':

return state + 1;

case 'DECREMENT':

return state - 1;

default:

return state;

}

}

然后,我们需要创建一个Redux store,并将reducer添加到store中。在这个例子中,我们使用createStore()函数来创建store,并将reducer作为参数传递给它。这个store的实现代码如下:


import { createStore } from 'redux';

import counter from './reducers/counter';



const store = createStore(counter);

接下来,我们需要创建一个React组件来展示计数器的值和增加/减少按钮。在这个组件中,我们使用connect()函数将组件与Redux store连接起来,以便在组件中获取state和dispatch actions。我们还将增加和减少按钮的点击事件绑定到相应的actions上。这个组件的实现代码如下:


import React from 'react';

import { connect } from 'react-redux';

import { increment, decrement } from './actions/counter';



function Counter({ count, onIncrement, onDecrement }) {

return (

<div>  

<div>Count: {count}</div>  

<button onClick={onIncrement}>Increment</button>  

<button onClick={onDecrement}>Decrement</button>  

</div>  

);

}



const mapStateToProps = state => ({ count: state });

const mapDispatchToProps = dispatch => ({ onIncrement: () => dispatch(increment()), onDecrement: () => dispatch(decrement()) });

export default connect(mapStateToProps, mapDispatchToProps)(Counter);


推荐文章