这是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( <Provider store = {store}> <App /> </Provider>, 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 ( <div className = "App"> <header className = "App-header"> <Counter/> </header> </div> ); } } 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 ( <div className = "App"> <div>{counter}</div> <div> <button onClick = {increment}>INCREMENT BY 1</button> </div> <div> <button onClick = {decrement}>DECREMENT BY 1</button> </div> <button onClick = {reset}>RESET</button> </div> ); } } 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。
当我单击增量两次时,数字会变成2。
当我们递减一次时,就会减少1。
并重置将使应用返回到初始状态,即计数器值0。
应用程序的状态将移至仅调度增量操作而跳过其余操作的时间。
我们鼓励您自己开发一个小的Todo App,以更好地了解Redux工具。
作者:terry,如若转载,请注明出处:https://www.web176.com/redux/2215.html