📅  最后修改于: 2020-10-20 04:57:37             🧑  作者: Mango
这是react和Redux应用程序的一个小例子。您也可以尝试开发小型应用程序。下面给出了增加或减少计数器的示例代码-
这是根文件,负责创建存储并渲染我们的react app组件。
/src/index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux';
import reducer from '../src/reducer/index'
import App from '../src/App'
import './index.css';
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)
render(
, document.getElementById('root')
)
这是我们的根源。它负责将计数器容器组件呈现为子级。
/src/app.js
import React, { Component } from 'react';
import './App.css';
import Counter from '../src/container/appContainer';
class App extends Component {
render() {
return (
);
}
}
export default App;
以下是容器组件,负责提供Redux的状态以响应组件-
/container/counterContainer.js
import { connect } from 'react-redux'
import Counter from '../component/counter'
import { increment, decrement, reset } from '../actions';
const mapStateToProps = (state) => {
return {
counter: state
};
};
const mapDispatchToProps = (dispatch) => {
return {
increment: () => dispatch(increment()),
decrement: () => dispatch(decrement()),
reset: () => dispatch(reset())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
下面给出的是负责视图部分的react组件-
/component/counter.js
import React, { Component } from 'react';
class Counter extends Component {
render() {
const {counter,increment,decrement,reset} = this.props;
return (
{counter}
);
}
}
export default Counter;
以下是负责创建动作的动作创建者-
/actions/index.js
export function increment() {
return {
type: 'INCREMENT'
}
}
export function decrement() {
return {
type: 'DECREMENT'
}
}
export function reset() {
return { type: 'RESET' }
}
下面,我们显示了reducer文件的代码行,该文件负责更新Redux中的状态。
reducer/index.js
const reducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT': return state + 1
case 'DECREMENT': return state - 1
case 'RESET' : return 0 default: return state
}
}
export default reducer;
最初,该应用程序如下所示-
当我单击增量两次时,输出屏幕将如下所示-
当我们递减一次时,它显示以下屏幕-
并重置将使应用返回到初始状态,该初始状态的计数器值为0。如下所示-
让我们了解在执行第一个增量操作时Redux开发工具会发生什么-
应用程序的状态将移至仅调度增量操作而跳过其余操作的时间。
我们鼓励您自己开发一个小的Todo App,以更好地了解Redux工具。