redux（一）简单例子

快来打我* 2022-06-12 02:48 208阅读 0赞

第一步创建项目：这里我直接采用dva创建项目

dva new react_five

创建后，通过webstore打开项目，项目解构大概如下：  
![这里写图片描述][SouthEast]  
第二步：创建几个文件夹。

1.  stores 存放redux的store配置信息
2.  actions 存放redux的action
3.  reducers 存放redux的reducers
4.  containers存放 界面视图入口文件
    
    ![这里写图片描述][SouthEast 1]

第三步:修改src/router.js文件  
before：

import React from 'react';
    import { Router, Route } from 'dva/router';
    import IndexPage from './routes/IndexPage';
    
    function RouterConfig({ history }) { 
      return (
        <Router history={history}>
          <Route path="/" component={IndexPage} />
        </Router>
      );
    }
    
    export default RouterConfig;

dva默认访问的是/routes/IndexPage文件，我们这里需要修改成，访问/containers/App.jsx ，并且我们需要修改组件调用处的代码，需要将store对象传给组件  
after:

import React from 'react';
    import { Router, Route } from 'dva/router';
    import IndexPage from './routes/IndexPage';
    import { Provider } from 'react-redux';
    import App from './containers/App' //通过一个store的配置文件来初始化store对象 import configureStore from './stores/configureStore';
    const store = configureStore(); 
    
    function RouterConfig({ history }) { 
      return (
      //Provider是redux组件提供的一个系统方法
          <Provider store={store}>
            <Router history={history}>
            <Route path="/" component={App} />
            </Router>
          </Provider>
      );
    }
    
    export default RouterConfig;

修改完了，最好是写个简单的App.jsx启动下服务看看，如果等全部写完再来调试，碰到问题就比较难查找了。  
第四步：定义store的配置信息  
其实我们在修改入口的方法时，我们通过configureStore创建了一个store对象

import configureStore from './stores/configureStore';
    const store = configureStore();

然后通过Provider 将store对象传给了组件App的上下文。

所以需要我们来定义configureStore的内容  
/stores/configureStore.js的内容如下：

import { createStore } from 'redux';
    import rootReducer from '../reducers';
    
    
    export default function configureStore(initialState) {
      const store = createStore(rootReducer, initialState);
      if (module.hot) {
        module.hot.accept('../reducers', () => { const nextReducer = require('../reducers'); store.replaceReducer(nextReducer); }); } return store; }

他从 redux 拿到 createStore 这个函数，再获取到 rootReducer ；  
createStore 函数接收两个参数，(reducer, \[initialState\])，reducer 毋庸置疑，他需要从 store 获取 state，以及连接到 reducer 交互。  
initialState 是可以自定义的一个初始化 state，可选参数。  
module.hot这个可以不用管，这是 webpack 热加载的处理，你也可以不要他。  
第五步：定义reducer，因为第四步里面有个关键语句

const store = createStore(rootReducer, initialState);

所以我们来定义reducer的内容， /reducers/index.js 的内容如下：

import { combineReducers } from 'redux';
    import ClickButton from './ClickButton'; 
    //combineReducers的作用就是将多个reducer合并成一个reducer。这里这么写是为了后期方便进行扩展。
    const rootReducer = combineReducers({
      ClickButton 
    });
    
    export default rootReducer;

reducers/ClickButton.js的内容如下：

import { CHANGE_TEXT, CLICK_BUTTON } from '../actions';
    
    const initialState = {
      text: 'Hello'
    }
    
    function clickRedux(state = initialState, action) { 
      switch (action.type) {
        case CHANGE_TEXT:
          return {
            text: action.text
          }
        case CLICK_BUTTON:
          return {
            text: action.text
          }
        default:
          return state
      }
    }
    
    export default clickRedux;

第六步：添加actions信息：我们在定义reducer时其实我们反复的看到了action对象，所以我们需要来定义的相应的action。其实action你可以定义为行为，根据不同的行为指定不同的Type，然后reducer再根据不同的Type来获取不同的数据信息。  
/actions/index.js的内容如下：

export const CHANGE_TEXT = 'ADD_TODO';
    export const CLICK_BUTTON = 'COMPLETE_TODO';
    
    export function ChangeText() { 
      return {
        type: CHANGE_TEXT,
        text:"点击了ChangeText"
      };
    }
    
    export function ClickButton() { 
      return {
        type: CLICK_BUTTON,
        text:"点击了ClickButton"
      };
    }

第七部：回到containers/App.jsx界面入口处，修改其中的代码：

import React,{Component} from 'react';
    import {connect } from 'react-redux';
    import {
      ChangeText,
      ClickButton
    } from '../actions';
    
    
    class App extends Component{ 
      render(){
        const {dispatch,text} = this.props;
        return (
          <div>
            <h1 onClick={()=>dispatch(ChangeText())}> {text} </h1>
            <button onClick={()=>dispatch(ClickButton())}>click me</button>
          </div>
        );
      }
    }
    
    //映射Redux state到组件的属性s
    function mapStateToProps(state) { 
      console.log(state.ClickBox.text)
      return { text:state.ClickBox.text}
    }
    
    export default connect(mapStateToProps)(App)

通过npm start启动起来，浏览器中效果如下  
![这里写图片描述][SouthEast 2]  
点击按钮：界面变成如下：  
![这里写图片描述][SouthEast 3]  
点击字，界面如下：  
![这里写图片描述][SouthEast 4]

下节我们对上面的代码进行分析,这节我们只是把功能实现了而已

[SouthEast]: /images/20220612/5e2a18d9f3d44563811d721307bf656e.png
[SouthEast 1]: /images/20220612/aae94cbbcb0a45f89e9adfde63cd4895.png
[SouthEast 2]: /images/20220612/b37f31742d6149148eaaede5330ce62d.png
[SouthEast 3]: /images/20220612/29c4ce4c873044008a662c8064f83d5a.png
[SouthEast 4]: /images/20220612/4a8e55ce4793413587dd01e28c707650.png