第九章扩展Redux

两种扩展Redux的方法

image.png
使用中间件

import {createStore, combineReducers, applyMiddleware, compose} from 'redux';

import {reducer as todoReducer} from './todos';
import {reducer as filterReducer} from './filter';

import Perf from 'react-addons-perf'

const win = window;
win.Perf = Perf

const reducer = combineReducers({
  todos: todoReducer,
  filter: filterReducer
});

const middlewares = [];
if (process.env.NODE_ENV !== 'production') {
  middlewares.push(require('redux-immutable-state-invariant')());
}

const storeEnhancers = compose(
  applyMiddleware(...middlewares),
  (win && win.devToolsExtension) ? win.devToolsExtension() : (f) => f,
);

const initialState = {
  todos: [
    {
      id: 0,
      text: 'First',
      completed: true
    },
    {
      id: 1,
      text: 'Second',
      completed: false
    },
    {
      id: 2,
      text: 'Third',
      completed: true
    }
  ]

}
export default createStore(reducer, initialState, storeEnhancers);

Promise中间件

image.png

image.png

image.png
Store Enhancer

image.png

第十章动画

动画的实现方式

image.png

2.css方式

image.png

2.脚本方式

image.png

React中的动画

image.png

import TransitionGroup from 'react-addons-css-transition-group';

const TodoList = ({todos}) => {
  return (
    
      
    {
      todos.map((item) => (
        
        ))
    }
      
    
  );
};

image.png

React-Motion
使用：

import {spring, TransitionMotion} from 'react-motion';

const willLeave = () => {
  return {
    height: spring(0),
    opacity: spring(0)
  };
}

const willEnter = () => {
  return {
    height: 0,
    opacity: 0
  };
};

const getStyles = (todos) => {
  return todos.map(item => {
    return {
      key: item.id.toString(),
      data: item,
      style: {
        height: spring(60),
        opacity: spring(1)
      }
    };
  });
}

const TodoList = ({todos}) => {
  const styles = getStyles(todos);
  return (
    
      {
        interpolatedStyles =>
        
          {
            interpolatedStyles.map(config => {
              const {data, style, key} = config;

              const item = data;
              return ();
            })
          }
        
        }
      
  );
};