redux学习

redux可以实现数据共享，处理数据。

1 redux包含
store 保存数据，传入action给reducer
action 触发动作
reducer 改变数据的值
provider 把数据传给子组件

app.js

import React from 'react'

import Books from './src/Books'
import rootReducer from './src/reducers'

import { Provider } from 'react-redux'
import { createStore } from 'redux'

const store = createStore(rootReducer)

export default class App extends React.Component {
  render() {
    return (
      
        
      
    )
  }
}

2 组件

mapDispatchToProps
默认名字，触发动作.addBook，removeBook组件和reducer中的名字一致
mapStateToProps
默认名字修改好的数据会传到这个方法里面.
books是组件中的一个对象，reducer会把修改好的值（state.bookReducer.books）传给他
connect
连接组件与redux

import React from 'react'
import {
  Text,
  View,
  ScrollView,
  StyleSheet,
  TextInput,
  TouchableOpacity
} from 'react-native'
import { addBook, removeBook } from './actions'

import { connect } from 'react-redux'

const initialState = {
  name: '',
  author: ''
}

class Books extends React.Component<{}> {
  state = initialState

  updateInput = (key, value) => {
    this.setState({
      ...this.state,
      [key]: value
    })
  }

  addBook = () => {
    this.props.dispatchAddBook(this.state)
    this.setState(initialState)
  }

  removeBook = (book) => {
    this.props.dispatchRemoveBook(book)
  }


  render() {
    const { books } = this.props
    console.log('==books==')
    console.log(books)

    return (

      
        Books
        
          {
            books.map((book, index) => (
              
                {book.name}
                {book.author}
                 this.removeBook(book)}>Remove
              
            ))
          }
        


        
          { 
             this.updateInput('name', value)}
              style={styles.input}
              placeholder='Book name'
            />
             this.updateInput('author', value)}
              style={styles.input}
              placeholder='Author Name'
            />
          }

          {
            
              +
            
          }

        
      
    )
  }
}

const styles = StyleSheet.create({
  inputContainer: {
    padding: 10,
    backgroundColor: '#ffffff',
    borderTopColor: '#ededed',
    borderTopWidth: 1,
    flexDirection: 'row',
    height: 100
  },
  inputWrapper: {
    flex: 1
  },
  input: {
    height: 44,
    padding: 7,
    backgroundColor: '#ededed',
    borderColor: '#ddd',
    borderWidth: 1,
    borderRadius: 10,
    flex: 1,
    marginBottom: 5
  },
  addButton: {
    fontSize: 28,
    lineHeight: 28
  },
  addButtonContainer: {
    width: 80,
    height: 80,
    backgroundColor: '#ededed',
    marginLeft: 10,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20
  },
  container: {
    flex: 1
  },
  booksContainer: {
    borderTopWidth: 1,
    borderTopColor: '#ddd',
    flex: 1
  },
  title: {
    paddingTop: 30,
    paddingBottom: 20,
    fontSize: 20,
    textAlign: 'center'
  },
  book: {
    padding: 20
  },
  name: {
    fontSize: 18
  },
  author: {
    fontSize: 14,
    color: '#999'
  }
})

const mapDispatchToProps = {
  dispatchAddBook: (book) => addBook(book),
  dispatchRemoveBook: (book) => removeBook(book)
}

const mapStateToProps = (state) => ({
  books: state.bookReducer.books
})


export default connect(mapStateToProps, mapDispatchToProps)(Books)

action

export const ADD_BOOK = 'ADD_BOOK'
export const REMOVE_BOOK = 'REMOVE_BOOK'
import uuidV4 from 'uuid/v4'

export function addBook (book) {
  return {
    type: ADD_BOOK,
    book: {
      ...book,
      id: uuidV4()
    }
  }
}

export function removeBook (book) {
  return {
    type: REMOVE_BOOK,
    book
  }
}

reducer

import uuidV4 from 'uuid/v4'
import { ADD_BOOK, REMOVE_BOOK } from '../actions'

const initialState = {
  books: [{ name: 'East of Eden', author: 'John Steinbeck', id: uuidV4() }]
}

const bookReducer = (state = initialState, action) => {
  switch(action.type) {
    case ADD_BOOK:
      return {
        books: [
          ...state.books,
          action.book
        ]
      }
    case REMOVE_BOOK:
      const index = state.books.findIndex(book => book.id === action.book.id)
      return {
        books: [
          ...state.books.slice(0, index),
          ...state.books.slice(index + 1)
        ]
      }

    default:
      return state
  }
}

export default bookReducer

reducer封装

import { combineReducers } from 'redux'
import bookReducer from './bookReducer'

const rootReducer = combineReducers({
  bookReducer
})

export default rootReducer