剧场模式
首页前端React轻松学 Redux-Saga

轻松学 Redux-Saga #3 Redux-Saga 的安装和输写第一个 Saga

海外散仙厉飞雨 · 真仙发布于
4

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!');
}
7 条回复
学员
tonyjiafan · 金仙巅峰xiao_ran · 太乙玉仙守护 · 真仙l617388617 · 金仙后期baozaomiaomiao · 金仙后期weblijingang · 真仙samuelshang · 大罗厨子 · 真仙irwinlove · 真仙17706511375 · 太乙玉仙shishihou · 太乙巅峰ClenLu · 金仙中期Kepler · 大罗巅峰xuezh · 太乙巅峰wanghuanhuai · 金仙后期wasd6631456 · 金仙后期咫尺的梦想 · 真仙woshimaxiaorui · 太乙玉仙herghost000 · 真仙lilili001 · 金仙后期pangshanshan · 真仙nfwyst · 金仙后期ccy940912 · 大罗Marvin · 真仙00Jane · 金仙后期吴盛威 · 太乙玉仙开心就好 · 金仙后期徐潇宇 · 金仙后期guxiaobai · 道祖suifengmidi · 金仙中期Super-Ps · 金仙后期duzhihao · 金仙后期satos · 金仙后期liumeng-02-05 · 金仙后期liunian1993 · 金仙后期masteralva · 金仙后期nels2000 · 太乙玉仙justinelong · 金仙后期libin · 金仙巅峰theShy · 太乙玉仙zc3130902 · 太乙玉仙与UIuoi89898 · 道祖JSjump · 太乙玉仙pengforfight · 真仙xiaoliu666 · 道祖chrisliume · 大罗pstkwj · 太乙玉仙jiangxiaoxin · 真仙gouding · 真仙dannyking630 · 太乙玉仙sanxing91221 · 真仙MackSure · 金仙中期
最新动态
tonyjiafan · 金仙巅峰学习到了5:18
xiao_ran · 太乙玉仙学习到了8:37
守护 · 真仙学习到了0:03
l617388617 · 金仙后期学习到了7:55
baozaomiaomiao · 金仙后期学习到了1:30

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:32

Top