《ant design pro v5 获取动态菜单与基于角色权限管理视频教程》 和 《零基础学习 Vue JS 3 完全免费视频教程》 正在更新
世界上最伟大的投资就是投资自己的教育
- src/index.js
- src/app.js
- src/reducers/counter.js
- src/reducers/index.js
- src/actions/counter.js
- src/constants/counter.js
- src/sagas/index.js
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';
import { Provider } from 'react-redux';
import { helloSaga } from './sagas';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
rootReducer,
composeWithDevTools(
applyMiddleware(sagaMiddleware)
)
);
sagaMiddleware.run(helloSaga);
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('root')
);
registerServiceWorker();
src/app.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { connect } from 'react-redux';
import { increment } from './actions/counter';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
{ this.props.counter }
</p>
<p>
<button onClick={ this.props.increment }>+</button>
</p>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
counter: state.counter
};
};
export default connect(mapStateToProps, { increment })(App);
src/reducers/counter.js
import { INCREMENT } from '../constants/counter';
const counter = (state = 1, action = {}) => {
switch(action.type) {
case INCREMENT:
return state + 1;
default: return state;
}
}
export default counter;
src/reducers/index.js
import { combineReducers } from 'redux';
import users from './users';
import counter from './counter';
export default combineReducers({
users,
counter
});
src/actions/counter.js
import { INCREMENT } from '../constants/counter';
export const increment = () => {
return {
type: INCREMENT
}
};
src/constants/counter.js
export const INCREMENT = 'INCREMENT';
src/sagas/index.js
export function* helloSaga() {
console.log('Hello Saga!');
}
1Free轻松学 Redux-Saga #1 课程简介与 Redux-Saga 介绍
2Free轻松学 Redux-Saga #2 准备环境和安装 Redux
Free轻松学 Redux-Saga #3 Redux-Saga 的安装和输写第一个 Saga
4Free轻松学 Redux-Saga #4 es6 的 generator part 1 介绍
5Pro轻松学 Redux-Saga #5 es6 的 generator part 2 next 方法传参数
6Pro轻松学 Redux-Saga #6 es6 的 generator part 3 生成器的意义
7Pro轻松学 Redux-Saga #7 es6 的 generator part 4 自动执行生成器
8Pro轻松学 Redux-Saga #8 使用 Redux-Saga 处理异步事件
9Pro轻松学 Redux-Saga #9 实例演练 takeEvery 和 takeLatest 的区别
10Pro轻松学 Redux-Saga #10 call 方法
11Pro轻松学 Redux-Saga #11 实例讲解发送 ajax 请求
12Pro轻松学 Redux-Saga #12 实例演练 call 方法如何执行并发任务
13Pro轻松学 Redux-Saga #13 实战演练在不同的文件中组织 rootSaga
14Pro轻松学 Redux-Saga #14 实例讲解 fork 方法
© 汕尾市求知科技有限公司 | 关注我们 | 在线学员:1122
粤公网安备 44152102000088号 | 粤ICP备19038915号
你好, 把每一个大组件的reducer, action等写在一个store里面这样会不会更好一点?
不会,分开来写更好点的
就是把所有的action写在一个文件夹里, 把所有的reducer写在一个文件夹里面吗等这种形式吗?
是的
好的,谢谢!
学习中。。。
加油
照着代码写的,不用redux-devtools-extension 程序能正常执行起来 saga也能输出,但是加了const store = createStore(rootReduces, composeWithDevTools(applyMiddleware(sagaMiddleware)));的composeWithDevTools 后编译能通过,但是页面就报错了
