Redux的简单实例使用

Posted 2020-11-24 lc123456

1.首先命令安装  npm install redux react-redux --save

2.在项目中找到index.js

  插入代码

 1 import React from ‘react‘;
 2 import ReactDOM from ‘react-dom‘;
 3 import App from "./App"
 4 import ‘./index.css‘;
 5 import * as serviceWorker from ‘./serviceWorker‘;
 6 
 7 import { Provider } from "react-redux"
 8 import { createStore } from ‘redux‘
 9 import rootReducer from ‘./reducers‘
10 
11 
12 // import Home from "./components/Home"
13 
14 const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
15 
16 
17 ReactDOM.render(
18     <Provider store={store}>
19                 <div>
20                     <App/>
21                 </div>
22     </Provider>,
23     document.getElementById("root")
24 )
25 
26 serviceWorker.unregister();

2.查看app.js

 1 import React from ‘react‘;
 2 import ‘./App.css‘;
 3 import Home from "./components/Home"
 4 function App() {
 5   return (
 6     <div className="App">
 7      <Home></Home>
 8     </div>
 9   );
10 }
11 
12 export default App;

3.在src里面创建actions和reducers文件夹

4.actions文件夹下面创建2个index.js与counter.jsx文件

5.actions里面的index.jsx文件代码如下

1 import * as counterCreator from ‘./counter‘
2 
3 export {
4     counterCreator
5 }

6.actions里面的counter.jsx文件代码如下

1 export function increment(){
2     return {
3         type:‘INCREMENT‘
4     }

5 }

7.reducers里面的index.jsx文件代码如下

 1 import {combineReducers} from "redux"
 2 
 3 
 4 import counter from ‘./counter‘
 5 
 6 
 7 export default combineReducers({ 
 8     counter,
 9   
10 })

8.reducers里面的counter.jsx代码如下

 1 const initialState = {
 2     num:0
 3 }
 4 
 5 //state
 6 export default (state = initialState,action) => {
 7     switch (action.type){
 8         case ‘INCREMENT‘:
 9         return {
10             ...state,

11             num:state.num+1
12         }
13         default:
14              return state   
15     }
16 }

9.最后我们的主页代码

 1 import React, { Component } from ‘react‘
 2 import { connect } from ‘react-redux‘
 3 import { counterCreator } from ‘../actions‘
 4 class Home extends Component {
 5     constructor(props){
 6         super(props)
 7         this.state = {
 8 
 9         }
10     }
11 
12     btn = () => {
13         this.props.increment()
14     }
15     render() {
16         return (
17             <div>
18                 {this.props.$$counter}
19                 <button onClick={this.btn}>触发</button>
20             </div>
21         )
22     }
23 }
24 
25 const mapStateToProps = (state) => {
26     return {
27         $$counter: state.counter.num
28     }
29 }
30 
31 const mapDispatchToProps = (dispatch) => ({
32     increment: () => dispatch(counterCreator.increment())
33 })
34 export default connect(
35     mapStateToProps,
36     mapDispatchToProps
37 )(Home)