在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:prescottprue/react-redux-firebase开源软件地址:https://github.com/prescottprue/react-redux-firebase开源编程语言:JavaScript 100.0%开源软件介绍:react-redux-firebase
Usage NoteIf you are starting a new project and/or are not required to have your Firebase data loaded into redux, you might want to give reactfire a try before trying react-redux-firebase. I wrote up a quick medium article explaining a bit about how, why, and showing how to start a new project with these tools. Simple ExampleThe Material Example is deployed to demo.react-redux-firebase.com. Features
Installationnpm install --save react-redux-firebase This assumes you are using npm as your package manager. If you're not, you can access the library on unpkg, download it, or point your package manager to it. Theres more on this in the Builds section below. Older VersionsInterested in support for versions of UseInclude import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import firebase from 'firebase/app'
import 'firebase/database'
import 'firebase/auth'
// import 'firebase/firestore' // <- needed if using firestore
// import 'firebase/functions' // <- needed if using httpsCallable
import { createStore, combineReducers, compose } from 'redux'
import {
ReactReduxFirebaseProvider,
firebaseReducer
} from 'react-redux-firebase'
// import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // <- needed if using firestore
const fbConfig = {}
// react-redux-firebase config
const rrfConfig = {
userProfile: 'users'
// useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
}
// Initialize firebase instance
firebase.initializeApp(fbConfig)
// Initialize other services on firebase instance
// firebase.firestore() // <- needed if using firestore
// firebase.functions() // <- needed if using httpsCallable
// Add firebase to reducers
const rootReducer = combineReducers({
firebase: firebaseReducer
// firestore: firestoreReducer // <- needed if using firestore
})
// Create store with reducers and initial state
const initialState = {}
const store = createStore(rootReducer, initialState)
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch
// createFirestoreInstance // <- needed if using firestore
}
// Setup react-redux so that connect HOC can be used
function App() {
return (
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<Todos />
</ReactReduxFirebaseProvider>
</Provider>
)
}
render(<App />, document.getElementById('root')) The Firebase instance can then be grabbed from context within your components ( Add Data import React from 'react'
import { useFirebase } from 'react-redux-firebase'
export default function Todos() {
const firebase = useFirebase()
function addSampleTodo() {
const sampleTodo = { text: 'Sample', done: false }
return firebase.push('todos', sampleTodo)
}
return (
<div>
<h1>New Sample Todo</h1>
<button onClick={addSampleTodo}>Add</button>
</div>
)
} Load Data (listeners automatically managed on mount/unmount) import React from 'react'
import PropTypes from 'prop-types'
import { useSelector } from 'react-redux'
import { useFirebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase'
export default function Todos() {
useFirebaseConnect([
'todos' // { path: '/todos' } // object notation
])
const todos = useSelector((state) => state.firebase.ordered.todos)
if (!isLoaded(todos)) {
return <div>Loading...</div>
}
if (isEmpty(todos)) {
return <div>Todos List Is Empty</div>
}
return (
<div>
<ul>
{Object.keys(todos).map((key, id) => (
<TodoItem key={key} id={id} todo={todos[key]} />
))}
</ul>
</div>
)
} Queries Based On Route Params It is common to make a detail page that loads a single item instead of a whole list of items. A query for a specific import React from 'react'
import PropTypes from 'prop-types'
import { get } from 'lodash'
import { useSelector } from 'react-redux'
import { useFirebaseConnect, useFirebase } from 'react-redux-firebase'
import { useParams } from 'react-router-dom'
export default function Todo() {
const { todoId } = useParams() // matches todos/:todoId in route
const firebase = useFirebase()
useFirebaseConnect([
{ path: `todos/${todoId}` } // create todo listener
// `todos/${todoId}` // equivalent string notation
])
const todo = useSelector(
({ firebase: { data } }) => data.todos && data.todos[todoId]
)
function updateTodo() {
return firebase.update(`todos/${params.todoId}`, { done: !todo.isDone })
}
return (
<div>
<input
name="isDone"
type="checkbox"
checked={todo.isDone}
onChange={updateTodo}
/>
<span>{todo.label}</span>
</div>
)
} Load Data On Click import React from 'react'
import { useSelector } from 'react-redux'
import { useFirebase, isLoaded, isEmpty } from 'react-redux-firebase'
function TodosList() {
const todos = useSelector((state) => state.firebase.ordered.todos)
if (!isLoaded(todos)) {
return <div>Loading...</div>
}
if (isEmpty(todos)) {
return <div>Todos List Is Empty</div>
}
return (
<ul>
{Object.keys(todos).map((key, id) => (
<TodoItem key={key} id={id} todo={todos[key]} />
))}
</ul>
)
}
export default function Todos() {
const firebase = useFirebase()
return (
<div>
<h1>Todos</h1>
<EnhancedTodosList />
<button onClick={() => firebase.watchEvent('value', 'todos')}>
Load Todos
</button>
</div>
)
} FirestoreIf you plan to use Firestore, you should checkout
Currently DocsSee full documentation at react-redux-firebase.com ExamplesExamples FolderExamples folder is broken into two categories snippets and complete. State Based Query SnippetSnippet showing querying based on data in redux state. One of the more common examples is querying based on the current users auth UID. Decorators SnippetSnippet showing how to use decorators to simplify connect functions (redux's Simple App ExampleA simple example that was created using create-react-app's. Shows a list of todo items and allows you to add to them. Material App ExampleAn example that user Material UI built on top of the output of create-react-app's eject command. Shows a list of todo items and allows you to add to them. This is what is deployed to redux-firebasev3.firebaseapp.com. DiscussionJoin us on the redux-firebase gitter. IntegrationsView docs for recipes on integrations with:
Starting A ProjectGeneratorgenerator-react-firebase is a yeoman generator uses react-redux-firebase when opting to include redux. CRA Templatecra-template-rrf is a create-react-app template with react-redux-firebase included Complete ExamplesThe examples folder contains full applications that can be copied/adapted and used as a new project. FAQPlease visit the FAQ section of the docs BuildsMost commonly people consume Redux Firestore as a CommonJS module. This module is what you get when you import redux in a Webpack, Browserify, or a Node environment. If you don't use a module bundler, it's also fine. The redux-firestore npm package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. For example, you can drop a UMD build as a It can be imported like so: <script src="../node_modules/react-redux-firebase/dist/react-redux-firebase.min.js"></script>
<script src="../node_modules/redux-firestore/dist/redux-firestore.min.js"></script>
<!-- or through cdn: <script src="https://unpkg.com/react-redux-firebase@latest/dist/react-redux-firebase.min.js"></script> -->
<!-- or through cdn: <script src="https://unpkg.com/redux-firestore@latest/dist/redux-firestore.min.js"></script> -->
<script>
console.log('react redux firebase:', window.ReactReduxFirebase)
</script> Note: In an effort to keep things simple, the wording from this explanation was modeled after the installation section of the Redux Docs. ContributorsThis project exists thanks to all the people who contribute. |
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论