javascript 终极版，反应

Posted 2021-05-03

// index.js
// npm i redux --save
// npm i react-redux --save
...
import {BrowserRouter} from 'react-router-dom' // router
import {createStore} from 'redux' // redux
import {Provider} from 'react-redux' // react-redux
import rootReducer from 'redux/rootReducer' // redux
import App from './App'
import './media/style/main.sass'
...
const store = createStore(rootReducer) // наш store
const application = (
    <Provider store={store}>
        <React.Fragment>
            <BrowserRouter> 
                <App />
            </BrowserRouter>
        </React.Fragment>
    </Provider>
)
// Оборачиваем наше приложение в redux 
// Оборачиваем наше приложение в route
ReactDOM.render(application, document.getElementById('root'));


// rootReducer.js
const initialState = {
    urls: {
        references: 'http://unsi.ach.phoenixit.ru/nsi/references/'
    }
}
export default (state = initialState, action) => {
    return state
}


// Используем теперь в компоненте
import {connect} from 'react-redux'
..
class ReferencesItem extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: this.props.match.params.id, // это от route
            url: this.props.urlReferences // приняли от connect
        }
    }
    ...
}
...
function MapStateProps(state) {
    return {
        urlReferences: state.urls.references
    }
}
...
export default connect(MapStateProps)(ReferencesItem)