Redux基本使用(2)

admin 发布于 REACT

Redux基础使用:http://www.intewl.com/detail/82.html

首先在src创建对应store的目录,一般react脚手架搭建的项目只能导入scr里面的内容,如果导入src外的文件会报错,官方限制

Module not found: You attempted to import ****** which falls outside of the project src/ directory.
 Relative imports outside of src/ are not supported. You can either move it inside src/, 
or add a symlink to it from project's node_modules/.

如果需要解决导入src外的文件可以利用以下方法解决,但是建议不处理,直接将对应需要导入的资源放到src目录下

解决方法:1,项目直接eject命令,如果之前执行过了产生了webpack等文件就不用再执行。

                2,将webpack.config.dev中ModuleScopePlugin命令注释掉即可。

目录结果如下

|——src
|————stroe
|——————action
|————————count.js//对应count的action内容(代码一)
|————————index.js//将所有action合并导出,如果单独导出某个文件此处可以不处理(代码二)
|——————reducers
|————————count.js//对应count的reducers内容(代码三)
|————————index.js//将所有reducers放在一起(代码四)

代码一:count的action代码

在前面调用action事使用

 this.props.dispatch({type:'ADD',data:1})

这种代码不便于维护可以吧dispatch里的内容放在单独文件里面方便以后调用

export function add() {//单独导出用解构赋值方便调用
    return {type:'ADD',data:1}
}
export function reduce() {//单独导出用解构赋值方便调用
    return {type:'REDUCE',data:1}
}

调用页面首先需要导入action里的count

import {add} from '../store/action/count'
//调用方式
this.props.dispatch(add(1))
代码二:如果想将action合并成一个模块导出可以将其他的页面在index中导入最终全部导出

import * as counter from './counter';
import * as user from './user';
export default {
    counter,
    user
}
如果已经将全部action合并了,使用的方式有区别

import index from '../store/action/index'
//调用方式
this.props.dispatch(index.count.add(1))

代码三:将前面用到 的reducer内容放到一个文件中

function counterReducer(state={count:0},action){
    console.log(action)
    switch (action.type) {
        case "ADD":
            state.count+=parseInt(action.data)
            return {...state,...action.data}
        default:
            return state;
    }
}
export  default counterReducer;
代码四:因为项目一般会有多个reducer,所以最终把需要用到的reducer进行合并
import {createStore,combineReducers} from 'redux';
import counterReducer from './counter';
import userReducer from './user';

//3、存入仓库
let store=createStore(combineReducers({
    counter:counterReducer,
    user:userReducer
}));;
export default store;//在index.js直接使用
代码模块化后需要调整下index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from "react-redux"
import store from "./store/reducers/index.js"
ReactDOM.render(
    <Provider store={store}>
        <React.StrictMode>
             <App />
        </React.StrictMode>
    </Provider>
        ,
  document.getElementById('root')

);


215浏览量 · 0评论 · 2020-04-23 04:00:45

全部评论  0

注册登录 进行评论

热门专题

更多专题